課程
/前端開(kāi)發(fā)
/HTML/CSS
/十天精通CSS3
ol>li:nth-child(2n+1){
? background: green;
}
可以理解為父元素第2n+1個(gè)ol>li元素,背景變綠嗎?
2016-06-06
源自:十天精通CSS3 6-8
正在回答
樓上的慕友對(duì)表達(dá)式的理解說(shuō)得很對(duì)了。這里補(bǔ)充一點(diǎn)思考的方向,對(duì)于后面區(qū)別nth-child與nth-of-type,last-child與last-of-type,first-child與first-of-type有幫助!這里分析nth-child與nth-of-type,這樣對(duì)于last-child與last-of-type,first-child與first-of-type就很容易理解了!當(dāng)看到使用nth-child與nth-of-type選擇器時(shí),我們首先要找到他的父元素,child是子(子元素),nth-child表示父元素下的某一子元素,type(類型)是父元素下的同一類型的某一元素!本題中ol>li:nth-child(2n+1)對(duì)于li使用了nth-child(2n+1),我們首先找到li的父元素,當(dāng)然是ol咯(>是子元素選擇器,更加清楚地已經(jīng)說(shuō)明了這一點(diǎn)),再找到ol下滿足nth-child(2n+1)條件的li元素,即第奇數(shù)個(gè)li元素。如果這里使用ol > li:nth-of-type(2n+1),結(jié)果相同,但意義不同,是因?yàn)閛l下只有l(wèi)i元素。若ol下第二個(gè)子元素是p元素的話,ol > li:nth-of-type(2n+1)將選擇第1、4、6、8、10個(gè)子元素,ol > li:nth-child(2n+1)將選擇第1、3、5、7、9個(gè)子元素。附上兩張圖說(shuō)明:
1. 代碼展示
2. 截圖展示:
我們來(lái)一點(diǎn)點(diǎn)解析代碼,ol>li代表的是ol子元素中的li,通俗一點(diǎn)理解,就是ol下的兒子li,不是孫子什么的,接下來(lái)nth-child(),括號(hào)中表示要選中的,n你可以理解為第一個(gè)是0,然后慢慢+1,第一次0+1=1,第二次2+1=3,以此類推,發(fā)現(xiàn)都是奇數(shù),也就是我們說(shuō)的單數(shù)被選中了,那么他就被改變了。同理,如果是2n-1,那就是偶數(shù)。你理解的倒過(guò)來(lái)說(shuō)了,應(yīng)該是ol>li元素中2n+1位置的子元素改變樣式。
是li的奇數(shù)行背景變成綠色
舉報(bào)
本課程為CSS3入門(mén)教程,深刻詳解CSS3知識(shí)讓網(wǎng)頁(yè)穿上絢麗裝備
2 回答看不太懂啊
1 回答還是看不懂checked
3 回答關(guān)于n不太懂
3 回答transform-style: preserve-3d;不太懂是什么意思?。?/p>
3 回答聽(tīng)不懂聽(tīng)不懂
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-07-04
樓上的慕友對(duì)表達(dá)式的理解說(shuō)得很對(duì)了。這里補(bǔ)充一點(diǎn)思考的方向,對(duì)于后面區(qū)別nth-child與nth-of-type,last-child與last-of-type,first-child與first-of-type有幫助!這里分析nth-child與nth-of-type,這樣對(duì)于last-child與last-of-type,first-child與first-of-type就很容易理解了!當(dāng)看到使用nth-child與nth-of-type選擇器時(shí),我們首先要找到他的父元素,child是子(子元素),nth-child表示父元素下的某一子元素,type(類型)是父元素下的同一類型的某一元素!本題中ol>li:nth-child(2n+1)對(duì)于li使用了nth-child(2n+1),我們首先找到li的父元素,當(dāng)然是ol咯(>是子元素選擇器,更加清楚地已經(jīng)說(shuō)明了這一點(diǎn)),再找到ol下滿足nth-child(2n+1)條件的li元素,即第奇數(shù)個(gè)li元素。如果這里使用ol > li:nth-of-type(2n+1),結(jié)果相同,但意義不同,是因?yàn)閛l下只有l(wèi)i元素。若ol下第二個(gè)子元素是p元素的話,ol > li:nth-of-type(2n+1)將選擇第1、4、6、8、10個(gè)子元素,ol > li:nth-child(2n+1)將選擇第1、3、5、7、9個(gè)子元素。附上兩張圖說(shuō)明:
1. 代碼展示
2. 截圖展示:
2016-06-18
我們來(lái)一點(diǎn)點(diǎn)解析代碼,ol>li代表的是ol子元素中的li,通俗一點(diǎn)理解,就是ol下的兒子li,不是孫子什么的,接下來(lái)nth-child(),括號(hào)中表示要選中的,n你可以理解為第一個(gè)是0,然后慢慢+1,第一次0+1=1,第二次2+1=3,以此類推,發(fā)現(xiàn)都是奇數(shù),也就是我們說(shuō)的單數(shù)被選中了,那么他就被改變了。同理,如果是2n-1,那就是偶數(shù)。你理解的倒過(guò)來(lái)說(shuō)了,應(yīng)該是ol>li元素中2n+1位置的子元素改變樣式。
2016-06-06
是li的奇數(shù)行背景變成綠色