css: 伪类和伪元素选择器

• :empty，选取没有子元素的元素。比如选择空的 span，就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空，不会被这个伪类选中。
• :checked，选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。
• :disabled，选取禁用的表单元素。
• :first-child，选取当前选择器下第一个元素。
• :last-child，和 first-child 相反，选取当前选择器下最后一个元素。
• :nth-child(an+b)，选取指定位置的元素。这个伪类是有参数的，参数可以支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类可以做到选择第几个，或者选择序号符合 an+b 的所有元素。比如使用 li:nth-child(2n+1)，就可以选中 li 元素中序号是2的整数倍加1的所有元素，也就是第1、3、5、7、9、2n+1个 li 元素。
• :nth-last-child(an+b) ，这个伪类和 nth-child 相似，只不过在计数的时候，这个伪类是从后往前计数。
• :only-child，选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效。
• :only-of-type，选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。

这个项目中会用到具有筛选功能的“:nth-child(an+b)”选择器，我们通过使用这个伪类按着网格排布的规律选择出需要加边框的元素。

二、伪元素选择器

伪元素选择器是用于向某些元素设置特殊效果。伪元素选择器选中的并不是真实的 DOM 元素，所以叫伪元素选择器。伪元素选择器常用的也就下面 5 个：

• ::first-line，为某个元素的第一行文字使用样式。
• ::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
• ::before，在某个元素之前插入一些内容。
• ::after，在某个元素之后插入一些内容。
• ::selection，对光标选中的元素添加样式。

Tips：

1. 伪元素选择器构造的元素是虚拟的，所以不能用 JS 去操作它。
2. 如果同时使用了 before 和 first-letter 两个伪类，第一个字是要从 before 里的内容开始算起的，如果 before里面的内容是一个非文本元素，那 first-letter 也会作用在这个非文本元素上，但是不一定能生效。
3. first-line 和 first-letter 不适用于内联元素，在内联元素中这两个选择器都会失效。
4. 在 CSS3 中，规定了伪类用一个冒号（:）表示，伪元素用两个冒号表示（::）。但除了 selection，其余四个伪元素选择器已经在 CSS2 中存在且和伪类用的是一样的单冒号表示的。为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以。在没有兼容问题的情况下，还是建议大家按着新的 CSS3 标准来开发。