首頁 >web前端 >css教學 >CSS選擇符之子代選擇符詳解

CSS選擇符之子代選擇符詳解

小云云原創: 2018-01-08 10:33:092078瀏覽

後代選擇符用於選取一個標籤的所有後代，包括子代和孫輩等；而子代選擇符只選取指定父輩的子代標籤（指定標籤元素的第一代子元素）。本文主要介紹了詳解CSS選擇符之子代選擇符的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

子代選擇符使用一個額外的符號（尖括號> ）來表示兩個元素之間的關係。

例如：body>h1 選取的是6c04bd5ca3fcae76e30b72ad730ca86d標籤裡的所有第一代4a249f0d628e2318394fd9b75b4636b1標籤。

HTML標籤的關係圖

#HTML程式碼

<h1>body里面的h1标题</h1>

<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签，p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>

<h2>body里面的h2标题</h2>

<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2（带链接）</a>
    </li>
    <li>
        <a href="#">列表3（带链接）</a>
    </li>
</ul>

弄清楚上面的結構之後，可以試試下面程式碼：

CSS程式碼

body>h2 {
    color: orange;
}

上面HTML程式碼裡面，一共有2個c1a436a314ed609750bd7c7d319db4da標籤，但6c04bd5ca3fcae76e30b72ad730ca86d只有一個子代的c1a436a314ed609750bd7c7d319db4da，另一個c1a436a314ed609750bd7c7d319db4da是在e388a4556c0f65e1904146cc1a846bee裡面的，所以上面的CSS程式碼只作用在第一個c1a436a314ed609750bd7c7d319db4da標籤。

以下是比較好玩的子選擇子

#:first-child

選取第一個子標籤。

CSS程式碼

h2:first-child {
    color: orange;
}

#這個選擇符的功能是：先找到網頁中所有c1a436a314ed609750bd7c7d319db4da標籤，透過c1a436a314ed609750bd7c7d319db4da標籤找到其父元素，再判斷c1a436a314ed609750bd7c7d319db4da標籤在其父元素中是否排第一個。

這裡因為6c04bd5ca3fcae76e30b72ad730ca86d的第一個標籤是4a249f0d628e2318394fd9b75b4636b1，所以6c04bd5ca3fcae76e30b72ad730ca86d的子元素c1a436a314ed609750bd7c7d319db4da沒被樣式作用到。

因為e388a4556c0f65e1904146cc1a846bee裡的c1a436a314ed609750bd7c7d319db4da是e388a4556c0f65e1904146cc1a846bee的第一個子元素，所以e388a4556c0f65e1904146cc1a846bee裡的c1a436a314ed609750bd7c7d319db4da變成了橘色字。

:last-child

這個選擇子與 :first-child 選擇子的作用類似，不過選取的是一個元素的最後一個子代。

CSS程式碼

li:last-child {
    font-size: 2em;
}

#可以看到，「小列表C」和「清單3（帶連結）」的字號變大了。因為這兩項都是被指定的最後一項。

:only-child

選取某個元素唯一的子代。

HTML程式碼

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

CSS程式碼

p:only-child {
    color: orange;
}

上述樣式只作用在第一個e388a4556c0f65e1904146cc1a846bee的e388a4556c0f65e1904146cc1a846bee元素。第二個e388a4556c0f65e1904146cc1a846bee裡面因為不只e388a4556c0f65e1904146cc1a846bee元素，還有3499910bf9dac5ae3c52d5ede7383485元素，所以第二個e388a4556c0f65e1904146cc1a846bee的e388a4556c0f65e1904146cc1a846bee元素不會被上述樣式影響。

這個選擇符比較難理解。只有當指定的標籤是另一個標籤的唯一子代時，這個選擇符定義的樣式才有效。也就是說，子代中只有一個指定的標籤還不行，如果指定的標籤有其他同儕標籤，這個選擇符定義的樣式就會失效。

:nth-child

這個選擇權用法比較複雜，不過也特別有用。

這個選擇子可以輕易地為表格中相隔的行、列表中相隔兩個項目的項目或相隔其他數目的子代元素定義樣式。

這個選擇符需要一個值，用來決定選取哪些子代。

其中最簡單的值是關鍵字，即odd和even。

odd用來選取奇數子代元素。
even用來選取偶數子代元素。

HTML程式碼

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS程式碼

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

#第一個子元素的下標是1。

要注意的是，如果在第一個25edfb22a4f469ecb59f1190150159c6之前還有其他元素，那麼第一個25edfb22a4f469ecb59f1190150159c6的下標就不是1了。

例如

HTML程式碼

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

這時的效果是

li:nth-child(odd) 的意思是找到25edfb22a4f469ecb59f1190150159c6元素的父元素，通过父元素来检测每一个25edfb22a4f469ecb59f1190150159c6的下标的奇偶。

因为ff6d136ddc5fdfeffaf53ff6ee95f185的第一个元素是3499910bf9dac5ae3c52d5ede7383485，第二个元素才是25edfb22a4f469ecb59f1190150159c6。也就是说，第一个25edfb22a4f469ecb59f1190150159c6的下标是2，所以第一个下标赋的样式是绿色的背景。

使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过，:nth-child() 还有一些更妙更强大的用法。

可以给 :nth-child() 指定一个数字，精确选择某个子代。比如说要让第4个25edfb22a4f469ecb59f1190150159c6的背景色改成橙色。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(4) {
    background: orange;
}

同样的，这里的 li:nth-child(4) 的意思，是找到25edfb22a4f469ecb59f1190150159c6标签的父元素，然后查找父元素的第4个子元素。

如果HTML代码是下面这样，CSS代码不变的情况下。

HTML代码

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

效果就会变成这样：

会选中第3个25edfb22a4f469ecb59f1190150159c6。因为第3个25edfb22a4f469ecb59f1190150159c6在其父元素里面是排第4的。

如果想每隔2个项目选中第三个项目，可以在数字后面加上字母n。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>

CSS代码

li:nth-child(3n) {
    background: orange;
}

每当遇到3的整数倍的那个元素，就会应用规定的样式。

如果想从第二个子代元素开始算起，选取每隔2个元素的第三个子代元素。可以在3n后面加个2。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>

CSS代码

li:nth-child(3n+2) {
    background: orange;
}

如果想从第5个开始算起，每隔2个元素的第三个子代元素更改样式。

CSS代码

li:nth-child(3n+5) {
    background: orange;
}

如果想反向遍历，n前面的倍数就要修改成负数。

CSS代码

li:nth-child(-n+3) {
    background: orange;
}

意思是：从列表的第三个条目算起，选取在此之前的每个条目。

如果想从第4个元素开始，往下选取所有元素。可以这样写：

CSS代码

li:nth-child(n+4) {
    background: orange;
}

以下是子代选择符总览表

CSS選擇符之子代選擇符詳解

相關文章