1. 程式人生 > >序選擇器

序選擇器

倒數 -c -s type 第一個 類別 標簽設置 奇數 style

作用:選中指定的任意標簽設置屬性

一、同級別的第幾個,不區分類型

  • first-child 選中同級別中的第一個標簽
  • last-child 選中同級別中的最後一個標簽
  • nth-child(n) 選中同級別中的第 n 個標簽
  • nth-last-child(n) 選中同級別中的倒數第 n 個標簽
  • only-child 選中父元素中唯一的標簽

例:p:first-child{color:red;}

二、同級別 同類別的第幾個

  • first-of-type 選中同級別同類型中的第一個標簽
  • last-of-type 選中同級別同類型中的最後一個標簽
  • nth-of-type(n) 選中同級別同類型中的第 n 個標簽
  • nth-last-of-type(n) 選中同級別同類型中的倒數第 n 個標簽
  • only-of-type 選中父元素中唯一類型的某個標簽

三、其他用法

  • nth-child(odd) 選中同級別中的所有奇數
  • nth-child(even) 選中同級別中的所有偶數
  • nth-child(xn + y) x和y是用戶自定義的,而n是一個計數器,從0開始遞增
  • nth-of-type(odd) 選中同級別同類型中的所有奇數
  • nth-of-type(even) 選中同級別同類型中的所有偶數
  • nth-of-type(xn + y) x和y是用戶自定義的,而n是一個計數器,從0開始遞增

註:摘自李南江老師筆記

序選擇器