編碼的世界 / 優質文選 / 生涯

css3的nth-child選擇器的詳細探討


2021年7月05日
-   

css3的nth-child選擇器的詳細探討
前言
在十年前開始的div+css布局興起之時,我就開始了CSS的學習和實踐.在當年,對於CSS選擇器,基本上是沒有什麼選擇性的,只有ID選擇器,CLASS選擇器,以及元素選擇器,當然,還包括#id p 這種子選擇器.
在那個蠻荒時代,各大瀏覽器對CSS的支持是相當那啥了.於是,我們為了實現一些效果,比如要控制列表中的最後一個元素,我們會給最後一個元素加上一個CLASS,來方便我們特殊處理.如果要做各行變色這種特殊效果,我們需要各行給每個列加上不同的class.而我們在使用一些CMS系統來制作網站的時候,可能這個系統是不支持這麼輸出的,那麼就麻煩了.我個人很多時候是用圖片來實現我向要的效果的.
在html5+css3興起的當今,CSS的應用的情況已經大大好轉了,首先,基本上我們可以不考慮IE6這種古董瀏覽器了.尤其是我們在做移動端頁面的時候,基本上HTML5+CSS3的最新屬性,都是可以支持的.
在w3school網站上,對於 nth-child 的解釋十分含糊,以至於我一段時間認為,這個東西實在沒什麼大用.可是,當我研究透了之後,我猛然間發現,這家夥實在是太厲害了啊!!當我們把 nth-child 這個選擇器用到極致的時候,可以說,我們在處理任何列表的時候,是不需要給這些列加上class的.
有哪些 nth-child ?
nth-child 不僅僅只有一個,而是有一系列的這樣的選擇器,可以供我們在各種情況下使用.
:first-child
:first-of-type
:last-of-type
:only-of-type
:only-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child

具體每個有什麼差異,可以CSS 選擇器參考手冊頁面進行查詢.
今天,我們著重來講的是 nth-child
nth-child研究開始
為了簡單方便,我下面用這種方式在文章中演示我需要的效果
12345678910

如上表所示: ○ 代表沒有選中 ● 代表我要選擇的元素 下面的數字,表示是第幾個
構建DOM結構
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>nth-child</title>
</head>
<body>
<ul class="list">
<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>這是列表第10行</li>
</ul>
</body>
</html>

開始實踐CSS代碼,為方便研究,我們現給一段基礎CSS代碼
ul.list {width: 500px;margin: 100px auto;}
ul.list li {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}

通過上面的css,我們可以在瀏覽器中看到,這是個LI都變成了橙色的原點.如下表所示
12345678910

好,我們開始演示
選擇第N個LI
ul.list li:nth-child(3){background: #000;}

如上面的CSS所示,如果要選擇第三個,就寫3即可.
這是最簡單的.我們可以使用這種方法,給不同的li加上不同的樣式,如果你有需要,都可以分別訂制的.
如果是第一個,或者最後一個,寫法還可以更改為
/* 第一個 */
ul.list li:first-child{background: #000;}
/* 最後一個 */
ul.list li:last-child{background: #000;}

這裏需要說明一下,那就是,這裏的數字,和JS或者其他編程語言是不一樣的.一般的編程語言是從0開始為第一個,而這裏,可能是顧及我們一般的csser的編程基礎可能不時很好,所以,1就是1,而不是1是0.
選擇前三個
12345678910

ul.list li:nth-child(-n+3){background: #000;}

這是選擇前三個的方法.
選擇從第四個開始到最後
12345678910

ul.list li:nth-child(n+4){background: #000;}

選擇第四個到第八個
12345678910

ul.list li:nth-child(n+4):nth-child(-n+8){background: #000;}

這裏,其實就是把前面兩種方法給集成了一下.
選擇奇數行
12345678910

ul.list li:nth-child(2n+1){background: #000;}

這裏,nth-child提供了一種簡寫的方法
ul.list li:nth-child(odd){background: #000;}

選擇偶數行
12345678910

ul.list li:nth-child(2n){background: #000;}

這裏,nth-child也提供了一種簡寫的方法
ul.list li:nth-child(even){background: #000;}

選擇369等三倍數行
12345678910

ul.list li:nth-child(3n){background: #000;}

選擇258等三倍數行
12345678910

ul.list li:nth-child(3n+2){background: #000;}

選擇14710等三倍數行
12345678910

ul.list li:nth-child(3n+1){background: #000;}

通過上面幾個例子,應該對倍數行,這種需要,全部理解了吧,再來一個例子
選擇 510 等五倍數行
12345678910

ul.list li:nth-child(5n){background: #000;}

下面來點高級的
選擇第三個到第九個之間的奇數行(不包括39)
12345678910

怎麼做呢?看好了
ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){background: #000;}

好,就是組合上面的多種條件,來達到我們需要的選擇範圍.
選擇第三個到第九個之間的奇數行(包括39)
12345678910

ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9){background: #000;}

通過上面的兩個例子,應該學會了,怎麼樣組合多種條件,來選擇了.
再複雜一點
選擇3位倍數+1的(1/4/7/10),其中的偶數
12345678910

ul.list li:nth-child(3n+1):nth-child(2n){background: #000;}

nth-child總結
通過上面的各種例子,相信大家把沒個例子都實踐一遍之後,就能夠深入的理解了.在實際的項目中,多多去運用,那麼,便會逐漸的了然於胸了.
重要的是,理解它的語法,再結合你的需求,就基本能解決問題了.
此類選擇器拓展
提問,在不知道一共有多少個的情況下,如何選擇最後兩個??當你對上面的知識點,了然於胸後,是不是大大的有成就感呢?那麼,你知道上面這個問題應該怎麼解決嗎?
如何選擇最後兩個
12345678910

好吧,這個,是無法使用 nth-child這個選擇器來解決的.
我們需要換一個選擇器,這個選擇器就是 nth-last-child.
nth-last-child選擇器的用法,和 nth-child 選擇器的用法是完全一致的,只有一個不同,那就是 nth-child 是從第一個開始計數的,而nth-last-child是從倒數第一個開始計數的
那麼上面的問題,就有答案了.
ul.list li:nth-last-child(-n+2){background: #000;}

如何實現反選?
什麼是反選,舉例,我要選擇除了14710等三為倍數的數字之外的其他選項,如下表所示:
12345678910

好玩了,這裏我們需要再引入一個新的選擇:not()
代碼如何實現呢?
ul.list li:not(:nth-child(3n+1)){background: #000;}

把你的條件,放在:not()的括號當中,就能夠實現選擇了.
好,我們再換一個例子.我們選擇除了最後一個的其他所有.
用反選的方法選擇除了最後一個的其他所有.
12345678910

方法1
ul.list li:not(:nth-last-child(1)){background: #000;}

方法2
ul.list li:not(:last-child){background: #000;}

方法2為簡寫的方法.方法1為原理性寫法.
其他補充說明
上面我們的DOM結構使用了ul>li*10這種結構,也就是說,在這種結構裏面,是沒有處理li之外的同級元素的.如果有其他元素是什麼情況呢?
如果有其他元素的話,其他元素也會算在排隊序列裏面.因此,我們需要再了解兩個選擇器:nth-of-type(n) :nth-last-of-type(n).
這兩個,就只計算相同的元素了.裏面的語法呢,和nth-child是完全一致的.所以,這裏我就不再詳細的論述了.下面給一段例子,便於大家參考掌握
補充說明的演示DOM結構
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl class="dl">
<dt>第1個dt</dt>
<dd>第1個dd</dd>
<dt>第2個dt</dt>
<dd>第2個dd</dd>
<dt>第3個dt</dt>
<dd>第3個dd</dd>
<dt>第4個dt</dt>
<dd>第4個dd</dd>
<dt>第5個dt</dt>
<dd>第5個dd</dd>
</dl>
</body>
</html>

要實現的效果如下,選擇dt的偶數和dd的奇數,
DT用圓形演示 DD用矩形演示
1dt1dd2dt2dd3dt3dd4dt4dd5dt5dd

補充說明的CSS演示
dl.dl {width: 500px;margin: 100px auto;}
dl.dl dt {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}
dl.dl dd {width: 30px;height: 30px;border-radius: 5px;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}
dl.dl dt:nth-of-type(2n){background: #000;}
dl.dl dd:nth-of-type(2n+1){background: #06f;}

最後總結
CSS3提供的這些強大的選擇器,可以讓我們在具體的項目當中,靈活的運用.正是因為這些美好的CSS3屬性,讓我們前端工程師對於自己的工作是越來越喜愛了.
最後,讓我們動員起來,讓那些停留在windows xp系統的家人朋友都升級系統吧,就算不升級系統,也可以使用chrome等瀏覽器,如果這些瀏覽器也用不喜歡,推薦他們使用搜狗瀏覽器或者360等雙核瀏覽器吧.總而言之,瀏覽器越新,我們的日子越好過.
最後,這篇文章我花了三個小時在markdown編輯器裏編輯出來,也是很不容易啊,可以的話,點個贊,留個言鼓勵一下也是好的嘛!!
FungLeo原創,轉發請保留版權申明以及首發地址:http://blog.csdn.net/FungLeo/article/details/50813881

熱門文章