想要选中的标签写在头部
类选择器
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*="lady.163.com"]{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 根标签
