前端开发之CSS(选择器-简单选择器)

想要选中的标签写在头部

类选择器

class
例如

<div>
    <p>段落一</p>
    <p class="special">段落二</p>
    <p class="special stress">段落三</p>   
</div>

.special{ color:red;}
.stress{ font-weight:bold;}

id选择器

相同的id出现一次

#banner{color:red;}

通配符选择器

*{}

属性选择器

<form action="">
    <div>
        <input disabled type="text" value="李四">
    </div>
    <div>
        <input type="password" placeholder="密码">
    </div>
</form>

背景为灰色

[disabled]{background-color:#eee;}

按钮为灰色

[type = button]{color:#eee;}

属性包含了sports的值改变

<h2 class="title sports">标题</h2>
<p class="sports">内容</p>

[class ~= button]{color:#eee;}

a标签链接到文档内部

[href^="#"]{color:#eee;}

文档为pdf的链接

[href$=pdf]{color:#eee;}

链接中包含了某个值

伪类选择器

href中必须要有值

a:link{color:#eee;}

访问过链接

a:visited{color:#eee;}

鼠标移至链接

a:hover{color:#eee;}

鼠标点击链接

a:active{color:#eee;}

列表第一项

li:first-child{color:red;}

列表最后一项

li:last-child{color:red;}

列表奇偶相间（偶）

li:nth-child(even){color:red;}

列表某一项（1 和 4 共6个）

li:nth-child(3n+1){color:red;}

从下往上（3 和 6 共6个）

li:nth-last-child(3n+1){color:red;}

会使Dave Shea变红

因为span标签中嵌套了两个标签所以不适用only-child

• empty 标签为空
• root 根标签