CSS選擇符之子代選擇符的示例分析

這篇文章給大家分享的是有關(guān)CSS選擇符之子代選擇符的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、東區(qū)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

后代選擇符用于選取一個(gè)標(biāo)簽的所有后代，包括子代和孫輩等；而子代選擇符只選取指定父輩的子代標(biāo)簽（指定標(biāo)簽元素的第一代子元素）。

子代選擇符使用一個(gè)額外的符號(hào)（尖括號(hào)> ）表明兩個(gè)元素之間的關(guān)系。

例如：body>h2 選取的是<body>標(biāo)簽里的所有第一代<h2>標(biāo)簽。

HTML標(biāo)簽的關(guān)系圖

CSS選擇符之子代選擇符的示例分析

HTML代碼

<h2>body里面的h2標(biāo)題</h2>

<div>
    <h3>div里面的h3</h3>
    <p>
        div里面的p標(biāo)簽，p標(biāo)簽里面有一個(gè)<strong><a href="#">加粗的鏈接</a></strong>
    </p>
</div>

<h3>body里面的h3標(biāo)題</h3>

<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>

弄懂上面的結(jié)構(gòu)之后，可以試試下面代碼：

CSS代碼

body>h3 {
    color: orange;
}

CSS選擇符之子代選擇符的示例分析

上面HTML代碼里面，一共有2個(gè)<h3>標(biāo)簽，但<body>只有一個(gè)子代的<h3>，另一個(gè)<h3>是在<div>里面的，所以上面的CSS代碼只作用在第一個(gè)<h3>標(biāo)簽。

下面是比較好玩的子選擇符

:first-child

選取第一個(gè)子標(biāo)簽。

CSS代碼

h3:first-child {
    color: orange;
}

CSS選擇符之子代選擇符的示例分析

這個(gè)選擇符的作用是：先找到網(wǎng)頁(yè)中所有<h3>標(biāo)簽，通過(guò)<h3>標(biāo)簽找到其父元素，再判斷<h3>標(biāo)簽在其父元素中是否排第一個(gè)。

這里因?yàn)?lt;body>的第一個(gè)標(biāo)簽是<h2>，所以<body>的子元素<h3>沒(méi)被樣式作用到。

因?yàn)?lt;div>里的<h3>是<div>的第一個(gè)子元素，所以<div>里的<h3>變成了橙色字。

:last-child

這個(gè)選擇符與 :first-child 選擇符的作用類(lèi)似，不過(guò)選取的是一個(gè)元素的最后一個(gè)子代。

CSS代碼

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

CSS選擇符之子代選擇符的示例分析

可以看到，“小列表C”和“列表3（帶鏈接）”的字號(hào)變大了。因?yàn)檫@兩項(xiàng)都是被指定的最后一項(xiàng)。

:only-child

選取某個(gè)元素唯一的子代。

HTML代碼

<div>
    <p>第一個(gè)div的p</p>
</div>
<div>
    <p>第二個(gè)div的第一個(gè)p</p>
    <a href="#">第二個(gè)div的第一個(gè)a</a>
</div>

CSS代碼

p:only-child {
    color: orange;
}

CSS選擇符之子代選擇符的示例分析

上述樣式只作用在第一個(gè)<div>的<p>元素。第二個(gè)<div>里因?yàn)椴恢?lt;p>元素，還有<a>元素，所以第二個(gè)<div>的<p>元素不會(huì)被上述樣式影響。

這個(gè)選擇符比較難理解。僅當(dāng)指定的標(biāo)簽是另一個(gè)標(biāo)簽的唯一子代時(shí)，這個(gè)選擇符定義的樣式才有效。也就是說(shuō)，子代中只有一個(gè)指定的標(biāo)簽還不行，如果指定的標(biāo)簽有其他同輩標(biāo)簽，這個(gè)選擇符定義的樣式就會(huì)失效。

:nth-child

這個(gè)選擇符用法比較復(fù)雜，不過(guò)也特別有用。

這個(gè)選擇符可以輕易地為表格中相隔的行、列表中相隔兩個(gè)項(xiàng)目的項(xiàng)目或相隔其他數(shù)目的子代元素定義樣式。

這個(gè)選擇符需要一個(gè)值，用于確定選取哪些子代。

其中最簡(jiǎn)單的值是關(guān)鍵字，即odd和even。

odd用于選取奇數(shù)子代元素。
even用于選取偶數(shù)子代元素。

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;
}

CSS選擇符之子代選擇符的示例分析

第一個(gè)子元素的下標(biāo)是 1。

需要注意的是，如果在第一個(gè)<li>之前還有其他元素，那第一個(gè)<li>的下標(biāo)就不是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>

這時(shí)的效果是

CSS選擇符之子代選擇符的示例分析

li:nth-child(odd) 的意思是找到<li>元素的父元素，通過(guò)父元素來(lái)檢測(cè)每一個(gè)<li>的下標(biāo)的奇偶。

因?yàn)?lt;ul>的第一個(gè)元素是<a>，第二個(gè)元素才是<li>。也就是說(shuō)，第一個(gè)<li>的下標(biāo)是2，所以第一個(gè)下標(biāo)賦的樣式是綠色的背景。

使用上面的方法可以讓表格里的各行交替使用不同的樣式特別簡(jiǎn)單。不過(guò)，:nth-child() 還有一些更妙更強(qiáng)大的用法。

可以給 :nth-child() 指定一個(gè)數(shù)字，精確選擇某個(gè)子代。比如說(shuō)要讓第4個(gè)<li>的背景色改成橙色。

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;
}

CSS選擇符之子代選擇符的示例分析

同樣的，這里的 li:nth-child(4) 的意思，是找到<li>標(biāo)簽的父元素，然后查找父元素的第4個(gè)子元素。

如果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>

效果就會(huì)變成這樣：

CSS選擇符之子代選擇符的示例分析

會(huì)選中第3個(gè)<li>。因?yàn)榈?個(gè)<li>在其父元素里面是排第4的。

如果想每隔2個(gè)項(xiàng)目選中第三個(gè)項(xiàng)目，可以在數(shù)字后面加上字母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;
}

CSS選擇符之子代選擇符的示例分析

每當(dāng)遇到3的整數(shù)倍的那個(gè)元素，就會(huì)應(yīng)用規(guī)定的樣式。

如果想從第二個(gè)子代元素開(kāi)始算起，選取每隔2個(gè)元素的第三個(gè)子代元素?？梢栽?n后面加個(gè)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個(gè)開(kāi)始算起，每隔2個(gè)元素的第三個(gè)子代元素更改樣式。

CSS代碼

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

CSS選擇符之子代選擇符的示例分析

如果想反向遍歷，n前面的倍數(shù)就要修改成負(fù)數(shù)。

CSS代碼

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

CSS選擇符之子代選擇符的示例分析

意思是：從列表的第三個(gè)條目算起，選取在此之前的每個(gè)條目。

如果想從第4個(gè)元素開(kāi)始，往下選取所有元素。可以這樣寫(xiě)：

CSS代碼

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

CSS選擇符之子代選擇符的示例分析

以下是子代選擇符總覽表

CSS選擇符之子代選擇符的示例分析

感謝各位的閱讀！關(guān)于“CSS選擇符之子代選擇符的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱(chēng)：CSS選擇符之子代選擇符的示例分析
瀏覽路徑：http://muchs.cn/article26/jejcjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、App設(shè)計(jì)、企業(yè)網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容