css3 選擇器 nth child 選擇問題

2021-10-07 13:01:23 字數 679 閱讀 7513

nth-child(

) 是乙個偽類選擇器,它並不會按照標籤的順序進行選擇,而是按照順序進行選擇

#例子:

<

!doctype html>

p:nth-

child(8

) # 先根據順序選擇第8行,在檢查它是否是p元素,如果是p就是紅色,父元素是body

<

/style>

<

/head>

這是標題<

/h1>

1第乙個段落。<

/p>

2第二個段落。<

/p>

3第三個段落。<

/p>

4第四個段落。<

/p>

5注釋:<

/b>internet explorer 不支援 :nth-

child

() 選擇器。<

/p>

6這是標題<

/h1>

7第乙個段落。<

/p>

8第二個段落。<

/p>

9第三個段落。<

/p>

10第四個段落。<

/p>

11<

/body>

<

/html>

CSS3的nth child 選擇器

nth child 瀏覽器支援 ie9及以上版本,火狐,谷歌,safari opera都支援!nth child n 選擇器匹配屬於其父元素的第 n個子元素,不論元素的型別。p nth child 2 將匹配body的第二個元素 不要把 nth child 和 nth of type 混淆。css3...

CSS3偽類選擇器 nth child

css3偽類選擇器 nth child css3標準已提出數年,但是目前能實現她的瀏覽器並不多,雖然部分瀏覽器能實現部分規範,但這又有什麼用呢?面對更多的相容性問題,今天我們就來 前瞻 一下css3的乙個偽類選擇器 nth child css3的強大,讓人驚嘆,人們在驚喜之餘,又不得不為其艱難的道路...

CSS3之偽類選擇器 nth child

css3提供了強大的偽類 pseudo class 選擇器,使開發者能選擇某一物件中符合特定條件的元素進行渲染。這些偽類在剛接觸的時候大家會覺得非常混亂,但當掌握了以後能大大提高你的 效率,並且節省 量。今天先要說的是nth child偽類。下面給大家介紹下nth child的用法 first ch...