建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
nthoftype(n)選擇器
在CSS樣式表中，經(jīng)常需要進行對網(wǎng)頁中元素的選擇，而nth-of-type(n)選擇器能夠幫助我們更加方便快捷地選擇需要的元素。
一、選擇器類型
nth-of-type(n)選擇器是CSS中的一個偽類選擇器，是基于元素類型的選擇器。其中，n可以是一個整數(shù)、odd或even。
它的使用方式如下所示：
/*選擇第n個類型為特定元素的子元素*/
:nth-of-type(n)
/*選擇奇數(shù)個類型為特定元素的子元素*/
:nth-of-type(odd)
/*選擇偶數(shù)個類型為特定元素的子元素*/
:nth-of-type(even)
二、選擇器用法
這個選擇器可以幫助我們對網(wǎng)頁中的元素按照一定的規(guī)律進行選擇，比如選擇表格中第2行的所有單元格：
/*選擇表格中的第2行所有單元格*/
tr:nth-of-type(2) td
當(dāng)然，如果我們想要選擇表格中的1、3、5行，則可以這樣寫：
/*選擇表格中1、3、5行所有單元格*/
tr:nth-of-type(odd) td
三、選擇器的局限性
nth-of-type(n)選擇器雖然能夠幫助我們按照一定規(guī)律來選擇網(wǎng)頁元素，但是它也有一定的局限性。
首先，對于不同的元素類型，nth-of-type(n)選擇器只會把他們看作不同類型的元素，而不是按照常規(guī)的標簽來區(qū)分。例如，對于下面這段HTML代碼：
- 列表1-1
- 列表1-2
- 列表2-1
- 列表2-2
如果我們想要選擇所有的列表項，則需要使用下面的CSS代碼：
/*選擇所有列表項*/
li:nth-of-type(n)
其次，nth-of-type(n)選擇器只能從父元素中進行選擇，而不能跨級選擇元素。
四、選擇器的實際應(yīng)用
nth-of-type(n)選擇器基本上可以用在所有需要按照一定規(guī)律選取元素的場合。例如，我們可以用它來實現(xiàn)根據(jù)分辨率屏幕大小來選擇不同的字體大?。?/p>
/*根據(jù)分辨率選擇不同的字體大小*/
@media screen and (max-width: 600px) {
/*選擇所有p元素*/
p {
font-size: 16px;
}
/*選擇第二個p元素*/
p:nth-of-type(2) {
font-size: 18px;
}
/*選擇第三個p元素*/
p:nth-of-type(3) {
font-size: 20px;
}
}
除此之外，nth-of-type(n)選擇器還可以用在其他領(lǐng)域，例如在JavaScript中選取DOM元素、對表格進行樣式調(diào)整等等。
本文題目：nthoftype(n)選擇器
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dpsjdcs.html
