标签：
1.E:root
匹配E元素所在的根元素 即：html
2. E:nth-child(n)
（1）匹配E元素的父元素中第n个子元素，（2）且该位置的子元素类型必须是E类型。否则无效
p:nth-child(1){color:red}
<div>
<p>这是红色的<p>
</div>
<div>
<h1>这是第一个子元素 但不是P类型，不是红色</h1>
< p>这是黑色的 注意对比 nth-of-type(1) </p>
</div>
3. E:nth-of-type(n)
匹配E的父元素中所有的E类型的元素,忽略其他类型的元素。n 为p的个数，不算别的类型子元素
p:nth-of-type(1) {color:red}
<div>
<p>这是红色的</p>
</div>
<div>
<h1>你不是P元素，我不匹配你</h1>
<p>这是红色的</p>
</div>
4. E:nth-last-child(n)
和nth-child(n)一样，只不过是倒着来
5. E:nth-last-of-type(n)
和nth-of-type(n)一样，只不过是倒着来
6. E:first-child
匹配E的父元素中的第1个子元素，且这个元素类型必须是E类型，不是E类型无效。
实际上等同于E:nth-child(1)
p:first-child{color:red}
<div>
<p>这是红色的</p>
<p>这是黑色的</p>
</div>
<div>
<h1>这是黑色的（是第一个子元素但不是P类型。因而无效）</h1>
<p>这是黑色的</p>
<p>这是黑色的</p>
</div>
7. E:last-child
同上 匹配最后一个子元素，且该子元素必须是E类型，样式才有效。
8. E:first-of-type
匹配E的父元素的所有类型为E的子元素，忽略别的类型的子元素。是E:nth-of-type(n)的特例 n=1
//p:nth- of-type(1) {color:red}
p:first-of-type{color:red}
<div>
<p>这是红色的</p>
</div>
<div>
<h1>虽然你是第一个子元素，但你不是P元素，我不匹配你</h1>
<p>这是红色的<p>
</div>
9. E:last-of-type
匹配E的父元素中所有类型为E的子元素，忽略其他类型的子元素，是E：nth-last-of-type(n) n=1的特列
10. E:only-child 自我为中心 排斥同类和异类
匹配：E的父元素只有一个子元素，且该子元素必须是E类型。不然无效。好自私，拒绝二胎
p:only-child{color:red}
<div>
<p>这是红色的</p>
</div>
<div>
<h1>该div不只一个孩子，所以不匹配。</h1>
<p>这是黑色的</p>
</div>
<div>
<p>这是黑色的</p>
<p>这是黑色的</p>
</div>
11. E:only-of-type 只排斥同类
这个限制比上面宽松一些，可以允许父节点有别的孩子，但是别的孩子不能是E类型的。
p:only-of-type{color:red}
<div>
<p>这是红色的</p>
</div>
<hr>
<div>
<p>这是黑色的（只能有1个同类型节点）</p>
<p>这是黑色的</p>
</div>
<hr>
<div>
<h1>下面这个p 大度些，允许异类存在</h1>
<p>这是红色的</p>
<a> link </a>
</div>
12. E:empty
选择匹配E类型的元素，且该元素是五保户，没有子节点。
div:empty{boder:solid 1px green;height:30px}
<!--下面这个div有边框-->
<div></div>
<hr>
<!--下面这个div无边框 换行和空格都算文本元素-->
<div>
</div>
<hr>
<!—下面这个div -->
<div>
这个div有子元素无边框。文本节点也算
</div>
<hr>
<!—下面这个div无边框-->
<div>
<h1>这个div有子元素无边框</h1>
</div>
标签：
原文地址：http://www.cnblogs.com/hanyakui/p/5703754.html
