CSS3 结构伪类选择器 详解

1 CSS3 结构伪类选择器

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>