總結(jié)下常用的nth-child選擇符
我要評論前言
在前端編程中我們經(jīng)常用到nth-child選擇符，它可以接受數(shù)值也可以接受odd,even等，今天翻閱精通CSS一書才想起它還可以接受一個表達式，類似4n+1,-2n+1等。那他們各自具體有什么用呢？適用的場景是什么呢？可能大家還不是很清楚，下面我們來根據(jù)實例具體了解下，他們的html結(jié)構(gòu)如下：
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
</body>
nth-child(even)和nth-child(odd)
這個是很經(jīng)常用到的變量，分別代表偶數(shù)和奇數(shù)
<style type="text/css">
a:nth-child(even){/*偶數(shù)字體為紅色*/
color: red;
}
a:nth-child(odd){/*奇數(shù)字體大小為30px*/
font-size: 30px;
}
</style>
查閱瀏覽器也發(fā)現(xiàn)確實是跟我們預料的一樣，如下：
nth-child(1)
選擇單元素，元素根據(jù)給的數(shù)值來匹配，從1開始計數(shù)，應該是最為常見的，如下：
<style type="text/css">
a:nth-child(3){/*選擇第三個元素的數(shù)據(jù)進行處理*/
color: red;
font-size: 30px;
}
</style>
結(jié)果也是如我們所料的：
nth-child(2n+1)
這個表達式形式接觸的比較少，應該怎么去處理呢？其實他也是很簡單的，只要把n從0開始計數(shù)，再計算整個表達式的值，匹配文檔，如果沒有匹配成功的，則停止 例如nth-child(2n+1)是怎么匹配現(xiàn)在的文檔呢，當n=0，2n+1=1，存在則繼續(xù)匹配。n=1，2n+1=3，也存在，n=2，2n+1=5，還是存在，n=3，2n+1=7，此時已無法匹配成功了，所以起作用的元素應該是1，3，5行，讓我們看下瀏覽器結(jié)果是否如我們所料：
果然只有1，3，5
那如果是-n呢，例如-n+2，其實也是類似的，當n=0，-n+2=2，存在繼續(xù)匹配，當n=1，-n+2=1還是存在，當n=0，-n+2=0不存在結(jié)束匹配，所以起作用的元素應該是1，2行，看下結(jié)果：
所以我們可以利用這個來匹配前幾個元素，當然你設(shè)計的表達式不同，能匹配到的元素也是不同的。
擴展下經(jīng)常跟以上混淆的:nth-of-type
:nth-of-type他的取值跟上面是類似的，那差別在哪呢？當頁面元素變得復雜得時候就可以看出來了，下面改下html結(jié)構(gòu),如下：
<body>
<a>a1</a>
<p>p1</p>
<a>a2</a>
<p>p2</p>
<a>a3</a>
<p>p3</p>
<a>a4</a>
<p>p4</p>
</body>
可以發(fā)現(xiàn)這里面多了p標簽，那么當我們添加下列css樣式時會發(fā)生什么呢？
<style type="text/css">
a:nth-child(2){
color: red;
font-size: 30px;
}
</style>
我想很多人可能會說a2變紅變大，但其實是嗎？看下結(jié)果:
結(jié)果就是毫無變化，為什么呢？因為a:nth-child(2)指得是既是a標簽又是父元素中排第二的子元素，在我們的結(jié)構(gòu)中，父元素中排第二的子元素應該是p1所對應的標簽。那么要怎么實現(xiàn)a2變紅變大呢？這里就要引入容易混淆的a:nth-of-type(2)，因為他指的就是既是a標簽又是父元素中在所有a元素里排第二的子元素，那不就正和我意了？讓我們看下結(jié)果是否如我們所愿？
<style type="text/css">
a:nth-of-type(2){
color: red;
font-size: 30px;
}
</style>
這才是我們所想的。
小結(jié)
首先總結(jié)了nth-child的多種取值，注意單數(shù)值是從1開始計數(shù)，如果是數(shù)值表達式，n是從0開始計數(shù)
介紹了容易混淆的nth-of-type，nth-of-type是指在當前指定類型元素里的排序，而nth-child是在所有元素之間的排序
到此這篇關(guān)于總結(jié)下常用的nth-child選擇符 的文章就介紹到這了,更多相關(guān)nth-child選擇符 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解CSS nth-child與nth-of-type的元素查找方式
這篇文章主要介紹了詳解CSS nth-child與nth-of-type的元素查找方式的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-22
詳解CSS3選擇器:nth-child和:nth-of-type之間的差異
本篇文章主要介紹了CSS3選擇器:nth-child和:nth-of-type之間的差異，非常具有實用價值，需要的朋友可以參考下2017-09-18詳解CSS3中nth-child與nth-of-type的區(qū)別
在css3中有兩個新的選擇器可以選擇父元素下對應的子元素，一個是:nth-child 另一個是:nth-of-type。 但是它們到底有什么區(qū)別呢？下面這篇文章主要就給介紹了CSS3中nth-chil2017-01-05使用css屬性:nth-child(n)匹配選擇第n個子元素
css匹配選擇第n個子元素可以使用:nth-child(n) 選擇器，其匹配屬于其父元素的第N個子元素，不論元素的類型2014-07-29CSS3中:nth-child和:nth-of-type的區(qū)別深入理解
關(guān)于:nth-child和:nth-of-type的區(qū)別之前一直沒太注意，經(jīng)深入理解才發(fā)現(xiàn)里面其實暗藏玄機2014-03-10CSS3 :nth-child()偽類選擇器實現(xiàn)奇偶行顯示不同樣式
css3的強大，讓人驚嘆，今天我們就來“前瞻”一下CSS3的一個偽類選擇器“:nth-child()”實現(xiàn)奇偶行顯示不同樣式，具體的詳細示例可以參考下文，希望對大家有所幫助2013-11-05css :nth-child與:nth-of-type之小解
css :nth-child與:nth-of-type之小解,需要的朋友可以參考下。2011-10-07- CSS3標準已提出數(shù)年，但是目前能實現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實現(xiàn)部分規(guī)范，但這又有什么用呢？面對更多的兼容性問題，今天我們就來“前瞻”一下CSS3的一個偽類2010-07-10
- 網(wǎng)頁制作Webjx文章簡介：CSS3標準已提出數(shù)年，但是目前能實現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實現(xiàn)部分規(guī)范，但這又有什么用呢？面對更多的兼容性問題，今天我們就來“2009-04-02
