浅谈 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元素增删改查后，可能样式带来问题。
• 一定要区分伪类和伪元素的含义，和遵守语法规范。