天天看點
傳回

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: px;margin: px auto;}
ul.list li {width: px;height: px;border-radius: %;overflow: hidden;text-indent: -px;background: #f60;float: left;margin:  px;}
  • 1
  • 2

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

○ ○ ○ ○ ○ ○ ○ ○ ○ ○
1 2 3 4 5 6 7 8 9 10

好,我們開始示範

選擇第N個LI

  • 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
  • 1

這是選擇前三個的方法.

選擇從第四個開始到最後

○ ○ ○ ● ● ● ● ● ● ●
1 2 3 4 5 6 7 8 9 10
  • 1

選擇第四個到第八個

○ ○ ○ ● ● ● ● ● ○ ○
1 2 3 4 5 6 7 8 9 10
  • 1

這裡,其實就是把前面兩種方法給內建了一下.

選擇奇數行

● ○ ● ○ ● ○ ● ○ ● ○
1 2 3 4 5 6 7 8 9 10
  • 1

這裡,

nth-child

提供了一種簡寫的方法

  • 1

選擇偶數行

○ ● ○ ● ○ ● ○ ● ○ ●
1 2 3 4 5 6 7 8 9 10
  • 1

這裡,

nth-child

也提供了一種簡寫的方法

  • 1

選擇3\6\9等三倍數行

○ ○ ● ○ ○ ● ○ ○ ● ○
1 2 3 4 5 6 7 8 9 10
  • 1

選擇2\5\8等三倍數行

○ ● ○ ○ ● ○ ○ ● ○ ○
1 2 3 4 5 6 7 8 9 10
  • 1

選擇1\4\7\10等三倍數行

● ○ ○ ● ○ ○ ● ○ ○ ●
1 2 3 4 5 6 7 8 9 10
  • 1

通過上面幾個例子,應該對倍數行,這種需要,全部了解了吧,再來一個例子

選擇 5\10 等五倍數行

○ ○ ○ ○ ● ○ ○ ○ ○ ●
1 2 3 4 5 6 7 8 9 10
  • 1

下面來點進階的

選擇第三個到第九個之間的奇數行(不包括3\9)

○ ○ ○ ○ ● ○ ● ○ ○ ○
1 2 3 4 5 6 7 8 9 10

怎麼做呢?看好了

  • 1

好,就是組合上面的多種條件,來達到我們需要的選擇範圍.

選擇第三個到第九個之間的奇數行(包括3\9)

○ ○ ● ○ ● ○ ● ○ ● ○
1 2 3 4 5 6 7 8 9 10
  • 1

通過上面的兩個例子,應該學會了,怎麼樣組合多種條件,來選擇了.

再複雜一點

選擇3位倍數+1的(1/4/7/10),其中的偶數

○ ○ ○ ● ○ ○ ○ ○ ○ ●
1 2 3 4 5 6 7 8 9 10
  • 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

是從倒數第一個開始計數的

那麼上面的問題,就有答案了.

  • 1

如何實作反選?

什麼是反選,舉例,我要選擇除了1\4\7\10等三為倍數的數字之外的其他選項,如下表所示:

○ ● ● ○ ● ● ○ ● ● ○
1 2 3 4 5 6 7 8 9 10

好玩了,這裡我們需要再引入一個新的選擇

:not()

代碼如何實作呢?

  • 1

把你的條件,放在

:not()

的括号當中,就能夠實作選擇了.

好,我們再換一個例子.我們選擇除了最後一個的其他所有.

用反選的方法選擇除了最後一個的其他所有.

● ● ● ● ● ● ● ● ● ○
1 2 3 4 5 6 7 8 9 10

方法1

  • 1

方法2

  • 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>
        <dt>第4個dt</dt>
        <dd>第4個dd</dd>
        <dt>第5個dt</dt>
        <dd>第5個dd</dd>
    </dl>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

要實作的效果如下,選擇

dt

的偶數和dd的奇數,

DT用圓形示範 

DD用矩形示範\

○ ■ ● □ ○ ■ ● □ ○ ■
1dt 1dd 2dt 2dd 3dt 3dd 4dt 4dd 5dt 5dd

補充說明的CSS示範 

dl.dl {width: px;margin: px auto;}
dl.dl dt {width: px;height: px;border-radius: %;overflow: hidden;text-indent: -px;background: #f60;float: left;margin:  px;}
dl.dl dd {width: px;height: px;border-radius: px;overflow: hidden;text-indent: -px;background: #f60;float: left;margin:  px;}
dl.dl dt:nth-of-type(2n){background: #000;}
dl.dl dd:nth-of-type(2n+1){background: #06f;}
标簽的使用 css3 nth-child 僞類選擇器
上一篇: css不是第一個child,css中first-child和last-child不生效
下一篇: Linux裡tar解壓時報child,LINUX：解壓問題tar: Child returned status

繼續閱讀