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

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

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

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

子代選擇符使用一個額外的符號（尖括號> ）表明兩個元素之間的關(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)簽里面有一個<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個<h3>標(biāo)簽，但<body>只有一個子代的<h3>，另一個<h3>是在<div>里面的，所以上面的CSS代碼只作用在第一個<h3>標(biāo)簽。

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

:first-child

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

CSS代碼

h3:first-child {
    color: orange;
}

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

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

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

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

:last-child

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

CSS代碼

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

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

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

:only-child

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

HTML代碼

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

CSS代碼

p:only-child {
    color: orange;
}

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

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

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

:nth-child

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

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

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

其中最簡單的值是關(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選擇符之子代選擇符的示例分析

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

需要注意的是，如果在第一個<li>之前還有其他元素，那第一個<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>元素的父元素，通過父元素來檢測每一個<li>的下標(biāo)的奇偶。

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

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

可以給 :nth-child() 指定一個數(shù)字，精確選擇某個子代。比如說要讓第4個<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個子元素。

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

效果就會變成這樣：

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

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

如果想每隔2個項(xiàng)目選中第三個項(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ù)倍的那個元素，就會應(yīng)用規(guī)定的樣式。

如果想從第二個子代元素開始算起，選取每隔2個元素的第三個子代元素?？梢栽?n后面加個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;
}

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

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

CSS代碼

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

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

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

如果想從第4個元素開始，往下選取所有元素?？梢赃@樣寫：

CSS代碼

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

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

以下是子代選擇符總覽表

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

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

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

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

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

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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