CSS3之美（三）：伪类和伪元素

发表于 | 更新于 | 分类于 |
字数统计 1,741 | 阅读时长 6

伪类和伪元素极大地简化了我们的工作，例如，伪元素，一般网页布局中最脏最累的活儿都是交给它去干的。CSS3 新的伪类和伪元素模块不仅在结构上清晰明了，更丰富了选择器等。

结构伪类

CSS2 引入 first-child 之后，它一直都是唯一一个属于这种类型的伪类。但 CSS3 引入了 11 个新的结构伪类，极大地扩展了这一范围。

nth-*伪类

基本语法

nth-（这里使用 去替代若干不同的值）伪类的用法如下：

1
nth-*(n)

默认情况下，n 代表一个从 0 开始的数字，并以 1 递增（1，2，3，等等）。另一个整数可以作为乘数传递给它。例如，2n 就是代表 2 的倍数（2，4，6，等等），3n 就是 3 的倍数（3，6，9，等等），依次类推。下面是个示例：

1
2
3
4
5
6
7
8
E:nth-*(n) {}
/* 选择器 E 匹配的所有元素都会被选中 */
E:nth-*(2n) {}
/* 间隔选中 E 选择器匹配的元素 */
E:nth-*(3n) {}
/* E 选择器匹配的元素集中每隔三个就选中一个 */

除此之外，我们还可以使用数学运算符 + 和 -，所以 2n+1 就是间隔奇数（1，3，5，等等）选中匹配的元素，3n-1 就是间隔 2，5，8… 选择匹配元素。

该选择符有两个特殊的关键字值可以使用，分别是

  • odd： 等同于 2n+1，用于选中匹配元素的奇数项
  • even： 等同于 2n，用于选中匹配元素的偶数项

nth-child和nth-of-type

nth-child 在选择元素的时候，是以父元素中子元素的总数为基准，按照计数的位置进行选择；而 nth-of-type 则是仅仅只针对那些特定类型的子元素进行计数。下面是个示例：

nth-last-child和nth-last-of-type

nth-last-child 与 nth-last-of-type 伪类接受和 nth-child 与 nth-of-type 没什么大的区别，唯一的区别在于它们是从最后一个位置开始计数的。但是有一点儿需要注意，如果我们使用它们希望从后往前开始计数，那么我们就应该使用 -n 去替代 n。

1
2
3
4
5
E:nth-last-child(-n) {}
/* 选中父元素中指定位置的元素，从最后一个位置向前开始计数 */
E:nth-last-of-type(-n) {}
/* 选中父元素中某种指定类型的特定位置的元素，从最后一个位置向前计数 */

first-of-type、first-child和last-child、last-of-type

first-child 和 last-child 比较好理解，即将样式规则应用到父元素的第一个子元素、最后一个子元素上。

而 first-of-type 与 last-of-type 像 nth-of-type 一样，它们所应用的元素，必须是其父元素的某种指定类型的第一个子元素。

1
2
3
4
5
6
7
8
9
10
11
E:first-child
/* 被选择的元素有一个父元素，且其是该父元素的第一个子元素 */
E:last-child
/* 被选择的元素有一个父元素，且其是该父元素的最后一个子元素 */
E:first-of-type
/* 被选择的元素有一个父元素，其是该父元素的同类型子元素中第一个元素 */
E:last-of-type
/* 被选择的元素有一个父元素，其是该父元素的同类型子元素中最后一个元素 */

only-child和only-of-type

这两种伪类常用于在文档树中选择这样的元素：该元素有一个父元素，但没有任何的兄弟元素（only-child）或者没有相同类型的兄弟元素（only-of-type）。

1
2
3
4
5
:only-child
/* 被选择元素的父元素有且只有一个子元素，就是当前要选的元素 */
:only-of-type
/* 被选择元素的父元素中某种指定类型有且只有一个元素，就是当前要选的元素。 */

其他伪类

  • target 伪类能够在涉及的 URL 被使用的时候，把样式应用到指定元素上。如果要在 URL 被单击时把样式应用到元素上，可以使用

    1
    #my_id:target {}

  • empty 伪类选择没有子元素（包括文本节点）的元素。

  • root 伪类选择文档树中的第一个元素，它的唯一真正作用就是发生在为 XML 文档添加样式表的时候——在 HTML 中，root 永远是 html 元素。在 HTML 中使用 root 也有一个小优点，就是可以用它为 html 元素赋予更高的特殊度，这在需要覆盖简单类型选择器的时候是很有用的。
  • not 伪类在选择元素时，选择的是除了作为参数值给出的元素之外的所有元素。传入 not 伪类的参数必须是一个简单的选择器——所以连接符（比如 + 和 -）以及伪类元素都不是有效的值。

UI元素状态伪类

UI元素状态伪类根据用户界面（UI）元素的状态进行选择。尽管 HTML5 提出了一系列的 UI 元素，但在 HTML 中，只有 form 元素能够拥有状态：

1
2
3
4
5
6
7
8
E:checked {}
/* 匹配用户界面上处于选中状态的  E 元素（用于input type为radio与checkbox时） */
E:disabled {}
/* 匹配用户界面上处于禁用状态的 E 元素 */
E:enabled {}
/* 匹配用户界面上处于可用状态的 E 元素 */

伪元素

CSS2 中共有四个伪元素，分别是

  • :first-line：仅作用于块级元素，设置对象内的第一行的样式
  • :first-letter：仅作用于块级元素，设置对象内的第一个字符的样式
  • :before：在选中元素的子元素位置之前插入，必须设置 content 属性值
  • :after：在选中元素的子元素位置之后插入，层叠顺序在 E::before 之下，必须设置 content 属性值

CSS3 仅仅引入了两个新的伪元素：

  • ::placeholder： 用于设置对象文字占位符的样式（placeholder 是HTML5的表单新属性之一）
  • ::selection：设置对象被选中时的样式，该伪元素只能定义被选择时的background-color，color 和 text-shadow

但是 CSS3 对原有伪元素的定义进行了优化，

像伪类一样，伪元素提供的也是在文档树中没有具体指明信息。但是在文档树中，伪类利用的是一些虚幻的条件，比如元素在文档树中的位置或元素的状态，而伪元素就更远了，它可以把样式应用到文档树中根本就不存在的元素上。

CSS3 引入了新的语法用于区分伪元素和伪类。在 CSS3 中，伪元素的前缀使用的是双冒号（::），不过为了保证向后兼容，浏览器依然支持单冒号的写法。