CSS中的伪类与伪元素

发表于 分类于

简介[^1]

样式表中的选择器是控制网页样式输出的非常重要的工具之一，也是css通过DOM树来控制其样式的最好的方式之一。而除了标签选择器、类选择器、ID选择器、属性选择器以及元素关系选择器（父子、兄弟等选择器），CSS3为我们提供了一种更为复杂同时也是更为方便设计者的选择方式-伪类（Pseudo-Classes）和伪元素（Pseudo-Elements）。

伪类和伪元素通常由冒号（colon）引导，而CSS3重新规定伪元素之前需要由两个冒号引导，但是为了使旧版本网站也能够统一使用和显示（IE8及以下浏览器无法理解双冒号的语法），浏览器则仍支持单冒号引导的伪元素方式（除了少数特定的伪元素之外）。

伪类和伪元素的区别[^2]

CSS中的伪类根据元素的编码或动态状态等来选择HTML文档中特定部分，即选择HTML文档中的某元素（通过用户的干预或者随着时间的变化而产生动态改变状态），CSS2又将该特性扩展到了DOM树的某些“虚拟组件”和可推断部分（例如first-child），可以出现在选择器链条中的任何位置；

CSS中的伪元素是用来强调某些元素的子部分，允许选择并改变那些除DOM中指定的元素之外的部分的样式（对DOM树中未包含的逻辑元素进行选择和改变样式）(可以用来展示比如头字母大写等常见的排版效果)；伪元素有一些使用的限制条件：

  • 不允许出现在中的in-line样式（只能出现在外部样式表或位于的样式中）；
  • 在选择器的链条中只能出现在最后一位（即要位于任何类和ID选择之后）；
  • 每个选择器中只能出现一个伪元素（若要在单个元素结构中城县多个伪元素的选择，必须使用多个选择器/样式声明）；

伪类

伪类就像是class一样，以冒号引导（e.g. :hover等），可以以标签:伪类和类:伪类的形式存在于CSS样式表中。

动态伪类

链接样式的动态伪类

针对链接，用户可以无任何操作、将光标移至链接上、点击、点击后放开光标，将光标从链接上移走等操作。

  • a:link
    选择用户还未进行过任何操作的链接；

  • a:visited
    选择用户已经点击过的链接；

  • a:hover
    选择用户将鼠标移至上方的链接；同时，:hover伪类也可以用在除链接以外的元素上（e.g.

    或是

    ）；

  • a:active
    选择用户使用鼠标正在点击（按下）的链接；

样例代码：

1
2
3
4
.example a:link {color:gray;} /*链接没被访问时为灰色*/
.example a:visited {color:maroon;} /*链接被访问过后前景色为红色*/
.example a:hover {color:blue;} /*鼠标悬浮在链接上时前景色为蓝色*/
.example a:active {color:darkblue;} /*鼠标按下链接前景色为深蓝色*/

这里需要特别注意的是，这四个动态伪类在样式表中定义的顺序是不可以任意排序的，而是要遵循唯一的一个顺序，即LOVE/HATE原则，即以a:link/a:visited/a:hover/a:active的顺序来定义。这是因为在CSS样式表中针对同一个元素的样式定义要从一般到特殊。一个链接在用户未进行操作的时候可能同时拥有:link、:visited和:hover三种样式属性，而无论如何:hover都会覆盖前面两种样式，所以:hover要在前面两种样式之后定义，而:link又是最一般的样式，所以要放在第一位来进行定义；最后:active则能覆盖所有之前三种属样式，所以放在最后一位进行定义。一句话来总结这一特性，越容易被覆盖的样式越先定义，覆盖越多的样式要越晚定义。

表单样式的动态伪类

常对于输入类的表单进行选择并展示或修改其样式的动态伪类；

  • :focus
    与链接中的:hover的作用类似，是当用户将光标的注意力集中到某元素而改变其样式，多用于用户在网页上的表单进行输入的元素进行选择（e.g. \或\