CSS3之美(三):伪类和伪元素

伪类和伪元素极大地简化了我们的工作,例如,伪元素,一般网页布局中最脏最累的活儿都是交给它去干的。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-childnth-last-of-type 伪类接受和 nth-childnth-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-childlast-child 比较好理解,即将样式规则应用到父元素的第一个子元素、最后一个子元素上。

first-of-typelast-of-typenth-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-colorcolortext-shadow

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

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

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