淺談 css3 僞類

僞類

僞類技巧教學前，要區分兩個重要概念。僞類和僞元素，兩者常常被人弄混。因為兩者确實長得太像了，尤其在css3之前，兩者在使用形式上還一摸一樣，沒有規範可言。在css3之後兩者形式上做了區分，單個冒号是僞類，兩個冒号是僞元素。

僞類概念

僞類常用API

1. :empty。該僞類代表沒有子元素的元素。子元素隻可以是元素節點或文本（包括空格）。
2. :nth-of-type。該僞類代表具有一組兄弟節點的标簽，用 n 來篩選出在一組兄弟節點的位置。也就是說，可用于同級元素内排序位置不同顯示樣式。
3. :not()。該僞類被稱為反選僞類。作用是防止特定的元素被選中。也就是用來比對不符合一組選擇器的元素。
4. :nth-child。這個僞類首先找到所有目前元素的兄弟元素，然後按照位置先後順序從 1 開始排序，選擇的結果為 CSS 僞類:nth-child 括号中表達式（an+b）比對到的元素集合（n=0，1，2，3...）。

經驗教訓

• 能不使用nth相關的僞類，盡量不用。因為當dom元素增删改查後，可能樣式帶來問題。
• 一定要區分僞類和僞元素的含義，和遵守文法規範。