CSS中nth-of-type的使用方法

CSS中nth-of-type的使用方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)主營(yíng)郊區(qū)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā),郊區(qū)h5微信小程序開發(fā)搭建,郊區(qū)網(wǎng)站營(yíng)銷推廣歡迎郊區(qū)等地區(qū)企業(yè)咨詢

nth-of-type是一個(gè)獲取一些適用項(xiàng)并應(yīng)用樣式的屬性，它是從CSS 3添加的CSS選擇器之一，:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素。

如何使用nth-of-type？

我們先來看看nth-of-type的具體描述，注意“：”（冒號(hào)）在“nth - of - type（2n）”之前附加。

li:nth-of-type(2n){
 }

（）內(nèi)的“n”表示的是第幾位，“2n”則表示是其是2的倍數(shù)

你還可以指定其他的數(shù)，比如“3n+1”、“odd”、“even”等。

我們來看一個(gè)具體的示例

代碼如下

HTML代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS nth-of-type</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
  </body>
</html>

CSS代碼

sample.css

li:nth-of-type(2n){
  color: #5bc0de;
}

li{
  margin: 10px;
  font-size: 120%;
}

頁面上將顯示如下效果，你會(huì)看到2的倍數(shù)的顏色都變成了藍(lán)色。

CSS中nth-of-type的使用方法

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS中nth-of-type的使用方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：CSS中nth-of-type的使用方法
本文URL：http://bm7419.com/article38/gosgsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、服務(wù)器托管、軟件開發(fā)、網(wǎng)站收錄、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容