伪类

伪类技巧教学前，要区分两个重要概念。伪类和伪元素，两者常常被人弄混。因为两者确实长得太像了，尤其在css3之前，两者在使用形式上还一摸一样，没有规范可言。在css3之后两者形式上做了区分，单个冒号是伪类，两个冒号是伪元素。

伪类概念

伪类本意指，给元素添加了一个新的类名。然后在新类名下，写自己的样式即可。MDN中给到的解释如下。

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

伪类常用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-of-type和:nth-child并不一致，看上面的官方词汇，可能不直观。在用人话说一遍，就是:nth-child是找到在父元素中所以子元素的排列顺序，而:nth-of-type是同一个tagName下的的排列顺序

经验教训

  • 能不使用nth相关的伪类，尽量不用。因为当dom元素增删改查后，可能样式带来问题。
  • 一定要区分伪类和伪元素的含义，和遵守语法规范。