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>