CSS的nth-child使用方法
2018-08-27 瀏覽:451 作者:admin 類別:網頁設計

  當我想要完美的使用:nth-child或者:nth-of-type的時候有點兒頭暈。你越理解它們,就能寫出越好的CSS規則!

  在這些簡單的”秘方”(實際上是表達式)中我將重復的使用一個簡單的列表并隨即選擇數字。但是很明顯很容易改變它們以獲得類似的選擇器。

  只選擇第五個元素

CSS的nth-child使用方法

  li:nth-child(5){

  color: green;

  }

  要選擇第一個元素,你可以使用:first-child,或者我相信你也可以改下上面的例子來實現。

  選擇除了前面的五個之外的所有元素

  如果有超過10個元素,它將會選中超過5個。

  只選擇前面的5個

  li:nth-child(-n+5){

  color: green;

  }

  從開始的那個,選擇每第四個

  li:nth-child(4n-7) {

  /* or 4n+1 */

  color: green;

  }

  選擇奇數或者偶數

  li:nth-child(odd){

  color: green;

  }

  li:nth-child(even){

  color: green;

  }

  當然這里也有另外兩種實現,你懂的——神飛

  選擇最后一個元素

  li:last-child {

  color: green;

  }

  選擇倒數第二個

  li:nth-last-child(2){

  color: green;

  }

  從這個例子可看出,上面那個例子也有第二種實現方法。

  瀏覽器支持

  有趣的是,:first-child 和:last-child被IE 7支持,但是知道IE9才支持剩下的選擇器。如果你擔心IE,可以使用Selectivizr。如果你瀏覽器兼容性對你很重要,請關注When can I use…

  嗯,使用CSS3選擇器是件很有趣的事情,像做簡單的數學題一樣。

  li:nth-child(n+6){

  color: green;

  }

點擊這里給我發消息