亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

還是不太懂?

ol>li:nth-child(2n+1){

? background: green;

}

可以理解為父元素第2n+1個ol>li元素,背景變綠嗎?

正在回答

3 回答

樓上的慕友對表達式的理解說得很對了。這里補充一點思考的方向,對于后面區別nth-child與nth-of-type,last-child與last-of-type,first-child與first-of-type有幫助!這里分析nth-child與nth-of-type,這樣對于last-child與last-of-type,first-child與first-of-type就很容易理解了!當看到使用nth-child與nth-of-type選擇器時,我們首先要找到他的父元素,child是子(子元素),nth-child表示父元素下的某一子元素,type(類型)是父元素下的同一類型的某一元素!本題中ol>li:nth-child(2n+1)對于li使用了nth-child(2n+1),我們首先找到li的父元素,當然是ol咯(>是子元素選擇器,更加清楚地已經說明了這一點),再找到ol下滿足nth-child(2n+1)條件的li元素,即第奇數個li元素。如果這里使用ol > li:nth-of-type(2n+1),結果相同,但意義不同,是因為ol下只有li元素。若ol下第二個子元素是p元素的話,ol > li:nth-of-type(2n+1)將選擇第1、4、6、8、10個子元素,ol > li:nth-child(2n+1)將選擇第1、3、5、7、9個子元素。附上兩張圖說明:

1. 代碼展示

http://img1.sycdn.imooc.com//577a2867000153ab12540740.jpg

2. 截圖展示:

http://img1.sycdn.imooc.com//577a28b800012dd004630477.jpg

2 回復 有任何疑惑可以回復我~

我們來一點點解析代碼,ol>li代表的是ol子元素中的li,通俗一點理解,就是ol下的兒子li,不是孫子什么的,接下來nth-child(),括號中表示要選中的,n你可以理解為第一個是0,然后慢慢+1,第一次0+1=1,第二次2+1=3,以此類推,發現都是奇數,也就是我們說的單數被選中了,那么他就被改變了。同理,如果是2n-1,那就是偶數。你理解的倒過來說了,應該是ol>li元素中2n+1位置的子元素改變樣式。

2 回復 有任何疑惑可以回復我~

是li的奇數行背景變成綠色

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
十天精通CSS3
  • 參與學習       243057    人
  • 解答問題       2677    個

本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備

進入課程

還是不太懂?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號