CSS 伪类与伪元素

CSS 伪类

CSS 伪类是一个以冒号为前缀的关键字,当你希望元素在特定的状态下呈现特定的样式时,你可以在元素选择器后面指定对应状态的伪类,并设置相应的样式。

举个例子,你想要当鼠标移动悬停到一个元素上时,该元素的背景变成红色,你可以这么设置:

1
2
3
selector:hover {
background: red;
}

常见的伪类:

伪类 作用状态
:link 未访问的链接(只对设置了 href<a> 标签起作用)
:visited 已访问的链接
:hover 鼠标悬停在元素上时
:active 元素被激活时,比如鼠标按下左键到松开的这段时间
:focus 当元素获取聚焦时,比如 input 元素(表单元素)在输入时
:first-child 标签选择器 选择的一组兄弟元素的第一个元素
:last-child 指定父元素的最后一个元素
:nth-child(an+b) 文档树中在其之前具有 an+b-1 个兄弟节点的元素,其中 n 为正值或零值。
:nth-last-child(an+b) :nth-child() 的相反表示

为了可以正确地渲染链接元素的样式,:link伪类选择器应当放在其他伪类选择器的前面,并且遵循LVHA的先后顺序,即::link:visited:hover:active。

:nth-child(an+b)中,ab的取值举例如下:(n 表示 0~n 的一个值)

  • 0n+3 或简单的 3 匹配第三个元素。
  • 1n+0 或简单的 n 匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本 n1n 的匹配方式不一致。1n1n+0 是一致的,可根据喜好任选其一来使用。)
  • 2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素。你可以使用关键字 even 来替换此表达式。
  • 2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
  • 3n+4 匹配位置为 4、7、10、13…的元素。

CSS 伪元素

CSS 伪元素是以两个冒号开头的关键字,其作用于伪类相似,但是它与伪类不一样,伪元素是创造(create)了一个不存在于文档树里的子元素,并在上面设置了样式(这也就是为什么伪元素必须设置 content )。

也就是说伪类和伪元素的根本区别就是是否创建一个(“幽灵”)元素。

常见伪元素

这里举个 ::before::after 的例子:

1
2
3
4
<div>
<span class="example">我是一个例子</span>
<span>我是例子后的元素</span>
</div>
1
2
3
4
5
6
7
8
9
.example::before {
content: "Example:";
background: yellow;
}

.example::after {
content: "after!!!";
background: violet;
}

结果如下:

Pseudo-Element

参考

  1. CSS伪类与CSS伪元素的区别及由来:相当好!!!
  2. CSS伪类与CSS伪元素的典型与非典型应用:强烈推荐阅读
  3. 伪类和伪元素 - MDN
文章目录
  1. CSS 伪类
    1. 常见的伪类:
  2. CSS 伪元素
    1. 常见伪元素
  3. 参考
|