CSS E:nth-of-type(n)
E:nth-of-type(n)是偽類選擇器,能夠滿足如下幾個條件的元素:
(1).首先,必須是E型別元素,E表示選擇器,並非標籤型別。
(2).其次,元素必須位於父元素下同型別標籤兄弟元素的第"n"位,n型別有多種。
看了上述闡述,可能還有一部分朋友沒能明白選擇器的具體匹配規則。
不用擔心,下面再分解一下此選擇器的名稱,或許在一定程度上有助於對選擇器理解。
(1).E:必須是E選擇器匹配的元素。
(2).nth:翻譯成函式具有"第幾個"的意思。
(3).type:翻譯成函式具有"型別"的意思,指的是標籤型別。
(4).n:規定nth的次序。
(5).nth-of-type(n):表示匹配同級type標籤型別元素集合中的第"n"個元素,不要忘記選擇器E的限定。
如果閱讀上面的選擇器分解之後還不明白,也不用擔心,後面還會有詳細的程式碼例項演示。
語法結構:
[CSS] 純文字檢視 複製程式碼E:nth-of-type(n){ Rules }
引數解析:
(1).E:規定CSS選擇器。
(2).Rules:規定具體的CSS程式碼。
(3).n:規定匹配第幾個元素,引數型別可以是數字、關鍵字與表示式。
瀏覽器支援:
(1).IE9+瀏覽器支援此選擇器。
(2).edge瀏覽器支援此選擇器。
(3).谷歌瀏覽器支援此選擇器。
(4).火狐瀏覽器支援此選擇器。
(5).opera瀏覽器支援此選擇器。
(6).safria瀏覽器支援此選擇器。
例項程式碼:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> li:nth-of-type(1){ color:blue; } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> </ul> </body> </html>
程式碼執行效果截圖如下:
下面按照匹配規則來解析一下上面的程式碼:
(1).首先,能夠被元素選擇器"li"所匹配,也就是必須是li元素。
(2).其次,最終被匹配的li元素,必須位於兄弟li元素集合中的第一位。
(3).於是,第一個li元素滿足條件。
特別說明:程式語言中,集合中元素的位置通常從0開始計算,CSS並不算是程式語言,是從1開始計算。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> li:nth-of-type(1){ color:blue; } </style> </head> <body> <ul> <p>CSS教程</p> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> </ul> </body> </html>
程式碼執行效果截圖如下:
可以看到被匹配的元素只要是同標籤型別元素集合的第一個即可。
沒必要是父元素的子元素集合的第一個。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> span{display:block} span:nth-of-type(1){color:blue;} </style> </head> <body> <div id="box"> <span>螞蟻部落一</span> <span>螞蟻部落二</span> <div id="ant"> <div id="inner"> <span>螞蟻部落三</span> </div> <span>螞蟻部落四</span> </div> </div> </body> </html>
程式碼執行效果截圖如下:
程式碼分析如下:
(1).首先,被匹配元素必須是span元素。
(2).其次,被匹配的span元素必須位於其父元素下span兄弟元素的第一位。
(3).那麼,第一、第三和第四個span元素就會被匹配。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> li:nth-of-type(odd){ color:blue; } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> </ul> </body> </html>
程式碼執行效果截圖如下:
選擇器的引數可以是數字,也可以是關鍵字:
(1).odd:匹配奇數行同標籤型別兄弟元素。
(2).even:匹配偶數行同標籤型別兄弟元素。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> span{display:block} li:nth-of-type(odd){ color:blue; } </style> </head> <body> <ul> <span>CSS教程</span> <li>螞蟻部落一</li> <span>螞蟻部落一</span> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> </ul> </body> </html>
程式碼執行效果截圖如下:
奇偶行的匹配同樣遵循在同標籤型別元素中篩選,而不是父元素下所有兄弟元素中篩選。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> li:nth-of-type(2n + 1){ color:blue; } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> <li>螞蟻部落七</li> <li>螞蟻部落八</li> </ul> </body> </html>
程式碼執行效果截圖如下:
程式碼分析如下:
上述程式碼中,選擇器的引數是一個表示式,語法結構如下:
[CSS] 純文字檢視 複製程式碼E:nth-of-type(an+b)
解析如下:
(1).a表示每次計數跨越兄弟元素的基礎個數。
(2).n表示跨越的次數,從開始計數進行自增。
(3).b表示跨域的偏移量。
上述程式碼選擇器li:nth-of-type(2n + 1)匹配分解如下:
規定每次跨越兄弟元素基礎個數是2,偏移量為1:
(1).2*0+1=1
(2).2*1+1=3
(3).2*2+1=5
以此類推,於是第一、第三、第五和第七個li元素字型顏色被設定為藍色。
相關文章
- CSS E:nth-child(n)CSS
- CSS E:nth-last-of-type(n)CSSAST
- CSS E:nth-last-child(n)CSSAST
- CSS E:not()CSS
- CSS perspective(n)CSS
- CSS E:targetCSS
- CSS E:emptyCSS
- CSS E:rootCSS
- CSS E::selectionCSS
- CSS E[att^="val"]CSS
- CSS3 perspective(n)CSSS3
- CSS E::first-letterCSS
- CSS E:first-of-typeCSS
- CSS E:last-childCSSAST
- CSS E:only-of-typeCSS
- CSS E:only-childCSS
- CSS E:last-of-typeCSSAST
- CSS E:first-childCSS
- CSS E:link 選擇器CSS
- CSS E:enabled 選擇器CSS
- CSS E:focus 選擇器CSS
- CSS E,F 選擇器CSS
- CSS E[att]選擇器CSS
- CSS E:active 選擇器CSS
- CSS E:visited 選擇器CSS
- linux echo命令的-n、-e兩個引數Linux
- CSS E[att$="val"] 選擇器CSS
- CSS E F 包含選擇器CSS
- CSS E~F 兄弟選擇器CSS
- CSS E[att="val"]選擇器CSS
- CSS E[att|="val"]選擇器CSS
- CSS E[att~="val"]選擇器CSS
- CSS (E>F)子選擇符CSS
- CSS E[att*="val"]選擇器CSS
- CSS 顏色混合的N種方式CSS
- CSS 第N個子元素樣式CSS
- CSS E:default 偽類選擇器CSS
- CSS E::after 偽元素選擇器CSS