CSS3的nth-child選擇器的使用
在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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
具體每個有什麼差異,可以CSS 選擇器參考手冊頁面進行查詢.
今天,我們著重來講的是 nth-child
nth-child
研究開始
為了簡單方便,我下面用這種方式在文章中演示我需要的效果
○ | ● | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
如上表所示:
○ 代表沒有選中
● 代表我要選擇的元素
下面的數字,表示是第幾個
構建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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
開始實踐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;}
- 1
- 2
通過上面的css,我們可以在瀏覽器中看到,這是個LI都變成了黑色的圓點.如下表所示
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
好,我們開始演示
選擇第N個LI
ul.list li:nth-child(3){background: #000;}
- 1
如上面的CSS所示,如果要選擇第三個,就寫3即可.
這是最簡單的.我們可以使用這種方法,給不同的li加上不同的樣式,如果你有需要,都可以分別訂製的.
如果是第一個,或者最後一個,寫法還可以更改為
/* 第一個 */
ul.list li:first-child{background: #000;}
/* 最後一個 */
ul.list li:last-child{background: #000;}
- 1
- 2
- 3
- 4
這裡需要說明一下,那就是,這裡的數字,和JS或者其他程式語言是不一樣的.一般的程式語言是從0開始為第一個,而這裡,可能是顧及我們一般的csser的程式設計基礎可能不時很好,所以,1就是1,而不是1是0.
選擇前三個
● | ● | ● | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(-n+3){background: #000;}
- 1
這是選擇前三個的方法.
選擇從第四個開始到最後
○ | ○ | ○ | ● | ● | ● | ● | ● | ● | ● |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(n+4){background: #000;}
- 1
選擇第四個到第八個
○ | ○ | ○ | ● | ● | ● | ● | ● | ○ | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(n+4):nth-child(-n+8){background: #000;}
- 1
這裡,其實就是把前面兩種方法給集成了一下.
選擇奇數行
● | ○ | ● | ○ | ● | ○ | ● | ○ | ● | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(2n+1){background: #000;}
- 1
這裡,nth-child
提供了一種簡寫的方法
ul.list li:nth-child(odd){background: #000;}
- 1
選擇偶數行
○ | ● | ○ | ● | ○ | ● | ○ | ● | ○ | ● |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(2n){background: #000;}
- 1
這裡,nth-child
也提供了一種簡寫的方法
ul.list li:nth-child(even){background: #000;}
- 1
選擇3\6\9等三倍數行
○ | ○ | ● | ○ | ○ | ● | ○ | ○ | ● | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n){background: #000;}
- 1
選擇2\5\8等三倍數行
○ | ● | ○ | ○ | ● | ○ | ○ | ● | ○ | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n+2){background: #000;}
- 1
選擇1\4\7\10等三倍數行
● | ○ | ○ | ● | ○ | ○ | ● | ○ | ○ | ● |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n+1){background: #000;}
- 1
通過上面幾個例子,應該對倍數行,這種需要,全部理解了吧,再來一個例子
選擇 5\10 等五倍數行
○ | ○ | ○ | ○ | ● | ○ | ○ | ○ | ○ | ● |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(5n){background: #000;}
- 1
下面來點高階的
選擇第三個到第九個之間的奇數行(不包括3\9)
○ | ○ | ○ | ○ | ● | ○ | ● | ○ | ○ | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
怎麼做呢?看好了
ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){background: #000;}
- 1
好,就是組合上面的多種條件,來達到我們需要的選擇範圍.
選擇第三個到第九個之間的奇數行(包括3\9)
○ | ○ | ● | ○ | ● | ○ | ● | ○ | ● | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9){background: #000;}
- 1
通過上面的兩個例子,應該學會了,怎麼樣組合多種條件,來選擇了.
再複雜一點
選擇3位倍數+1的(1/4/7/10),其中的偶數
○ | ○ | ○ | ● | ○ | ○ | ○ | ○ | ○ | ● |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n+1):nth-child(2n){background: #000;}
- 1
nth-child
總結
通過上面的各種例子,相信大家把沒個例子都實踐一遍之後,就能夠深入的理解了.在實際的專案中,多多去運用,那麼,便會逐漸的瞭然於胸了.
重要的是,理解它的語法,再結合你的需求,就基本能解決問題了.
此類選擇器拓展
提問,在不知道一共有多少個的情況下,如何選擇最後兩個??
當你對上面的知識點,瞭然於胸後,是不是大大的有成就感呢?那麼,你知道上面這個問題應該怎麼解決嗎?
如何選擇最後兩個
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ● | ● |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
好吧,這個,是無法使用 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;}
- 1
如何實現反選?
什麼是反選,舉例,我要選擇除了1\4\7\10等三為倍數的數字之外的其他選項,如下表所示:
○ | ● | ● | ○ | ● | ● | ○ | ● | ● | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
好玩了,這裡我們需要再引入一個新的選擇:not()
程式碼如何實現呢?
ul.list li:not(:nth-child(3n+1)){background: #000;}
- 1
把你的條件,放在:not()
的括號當中,就能夠實現選擇了.
好,我們再換一個例子.我們選擇除了最後一個的其他所有.
用反選的方法選擇除了最後一個的其他所有.
● | ● | ● | ● | ● | ● | ● | ● | ● | ○ |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
方法1
ul.list li:not(:nth-last-child(1)){background: #000;}
- 1
方法2
ul.list li:not(:last-child){background: #000;}
- 1
方法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>
相關推薦
CSS3的nth-child選擇器實現斑馬線顯示
所在 通過 設置 child bsp 關鍵字 span 選擇 nbsp nth-child選擇器:通過選擇一個一個標簽來定義其父標簽範圍內所有同類表現的屬性。
例如:
div:nth-child(2)
{
background:#ffffff;
}
可以設置該div所在
2-7parent > child選擇器
與上一節介紹的ance desc選擇器相比,parent > child選擇器的範圍要小些,它所選擇的目標是子集元素,相當於一個家庭中的子輩們,但不包括孫輩,它的呼叫格式如下:
$(“parent > child”)
child引數獲取的元素都是parent選擇器的子元素,
CSS3——:nth-child選擇器基本用法簡述
注:n 是從1開始的
:nth-child 是 CSS3 提供的一個好用的選擇器,因為在專案中經常用到,所以簡單總結了它的常用方法
下面示例程式碼截圖用的是同一個例子,p元素的父元素都是body
p
初試css3的nth-child選擇器
最近在看程式碼模板時遇到了nth-child,覺得挺好玩就查了一下。nth-child:規定屬於其父元素的子元素的css樣式。引數可以是:數字+n如下圖意思為main-timeline的子元素,下標為2的倍數的所有timeline的padding:0 0 0 50px;引數還
CSS3的nth-child選擇器的使用
在w3school網站上,對於 nth-child 的解釋十分含糊,以至於我一段時間認為,這個東西實在沒什麼大用.可是,當我研究透了之後,我猛然間發現,這傢伙實在是太厲害了啊!!當我們把 nth-child 這個選擇器用到極致的時候,可以說,我們在處理任何列表的時候,是不需要
後代選擇器+nth-child()選擇器
後代選擇器“>”+nth-child()選擇器
之前一道面試題:
.list img{
width: 10px;
height: 20px;
background: blue;
}
jquery 的:first-child 和:last-child 選擇器例項
:first-child 選擇器被用來選擇父標籤的第一個子標籤,此是:nth-child(1)的簡便形式。
例如:
$(‘li:first-child’)—用來選擇所有li的父標籤的第一個li子標籤。
$(‘tr:first-child’)—類似。
:last-child
less 結合 nth-child 選擇器循環生成樣式
圖片 需要 解決 原來 strong ans span 使用 堆疊 問題描述:
實現頭像的堆疊效果
從第二個頭像開始,每個頭像都會蓋住前一個頭像上,遮蓋的寬度為 30px
實現疊加的方式有很多,比如給每個頭像添加 translateX 屬性,或者使用負值 marg
jQuery中 :first選擇器,first()和:first-child選擇器的區別
先看程式碼:
先執行第一條jquery語句,把其他兩條註釋掉,這裡我就不上圖了,直接貼結果:
執行第二條jquery語句,把其他兩條註釋掉:
執行第三條jquery語句,把其他兩條註釋掉:
總結:
可以看出第一條語句和第二條語句執行的結
jQuery :nth-child() 選擇器
在jQuery中可以通過 :nth-child(n)選擇器來選擇第n個子元素,例如:
for (var i = 0; i < default_btnClass.length && i < 4; i++) {
$("#to
CSS3 :nth-child() 選擇器
最近做專案的時候,需要修改jqGrid原始碼來修改外觀,把模態框(彈出框)從原來的豎直顯示變成多列顯示,而jqGrid外掛是自動根據繫結資料來生成前端樣式的,由於對CSS並不熟悉,經過一整天才相處瞭解決辦法
nth-child()用於選擇子元素
這是我原
CSS3的nth-child選擇器
如果你對這篇文章感興趣,可以瞭解更多的有關 CSS4 的知識來提升自己。
CSS3的:nth-child 和 :nth-last-child 選擇器的神奇之處,不僅僅是可以替代 :first-child 和 :last-child 選擇器,它還可以匹配
CSS3的nth-child() 選擇器,表格奇偶行變色
關鍵詞 相對 title 偶數 room 偽類選擇器 pre 規律 之前 nth-child() 應用背景
CSS3的nth-child() 選擇器,我之前很少用,在做表格偶數行變色的時候,我通常在綁定的時候,做一個js判斷,來加一個css,從而使表格偶數行和奇數行顏
CSS3選擇器:nth-child與:nth-of-type區別
html css css3
一、:nth-child
1.1 說明
:nth-child(n)選擇器匹配屬於其父元素的第N個子元素,不論元素的類型。n可以是數字、關鍵詞或公式。
註意:如果第N個子元素與選擇的元素類型不同則樣
偽類選擇器:first-child和:nth-child()和:first-of-type
head true http doctype 段落 元素 選擇 ont span x:first-child和x:nth-child(1)功能一樣,首先選中的是x元素,並且x元素必須是它父元素的第一個子元素,選擇器才成立,否則不能選中。其中x也可以是選擇器。由此看出nth-
nth-child 與 nth-of-type 選擇器的區別
-o class .text java 內容 改變 選擇 pre type
<body>
<ul>
<div><a href=""></a></div>
<li class="b
CSS3選擇器:nth-child和:nth-of-type之間的差異
nbsp 元素 段落 -c 之間 css3選擇器 子元素 差異 是個 對於p:nth-child選擇器,選擇一個元素如果:
這是個段落元素
這是父標簽的第二個子元素
對於p:nth-of-type選擇器,選擇一個元素如果:
選擇父標簽的第二個段落子元素
:nth-o
CSS3選擇器:nth-child和:nth-of-type的差異
鏈接 code 如果 參考 res ngx target -o pos p:nth-child(2)表示這個元素要是p標簽,且是第二個子元素,是兩個必須滿足的條件。
<section>
<div>我是一個普通的div標簽</div>
選擇器 nth-child和 nth-of-type的區別
info 失效 red 選擇器 -c alt 元素 分享圖片 light
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
虎記:強大的nth-child(n)偽類選擇器玩法
很多 共同點 ott 不同 人的 ber pad height 初級 轉載前端小哥:https://www.cnblogs.com/hu-w/p/5289668.html
寫在前面的戲:
最近參加了度娘前端IFE的春季班,刷任務,百度真是有營銷頭腦,讓咱們這幫