关于伪类，伪元素

最新推荐文章于 2024-07-20 17:11:20 发布

原创最新推荐文章于 2024-07-20 17:11:20 发布 · 693 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细解析了 CSS 中伪类与伪元素的概念及其使用区别，包括它们的定义、作用及具体应用场景，帮助读者深入理解并正确使用这两者。

之前遇到一个问题：li:hover::after 可行，li::after:hover不可行，去查了一些相关资料，下面记录一下相关的笔记和自己的理解。

1.首先明白二个概念： selector 和simple selector

在css3文档中有定义

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type

selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

从中可以看出，一个selector实际上就是simple selectors组成的序列链，并且，一个伪元素可以出现在最后的simple selectors序列的尾部。这句话是重点，如果我没有理解错，那么其实这个话就已经是我之前那个问题的答案了：伪元素如果存在，那么必须在尾部。

2.再来看看到底什么是伪类，什么是伪元素

css3中定义：

明确几点：

1）伪元素和伪类都是在文档树之外的；

2）伪元素就是一个抽象的元素（相当于创建抽象的文档流，不扰乱实际文档本身），它的作用就是实现文档语言不提供的一些机制作用，也就是将特殊的效果添加到某些选择器上；而伪类就是允许选择文档树外的信息或者其他simple selector不能来表达的信息（翻译的不好o(╯□╰)o），也就是向某些选择器增加一些特殊的效果。

3）css3中的规定是伪元素用::2个冒号，而伪类用:一个冒号。

4）伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要增加一个新的实际的元素才能实现。

3.类型（类似的就不写了）

（1）伪类：

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:lang	向带有指定 lang 属性的元素添加样式。	2
:first-child	向元素的第一个子元素添加样式。	2
:nth-of-type(n)	父元素中指定类型的子元素
:only-of-type	选择父元素的某类子元素是独生子的元素
:enabled	可用的表单元素
:target	选取当前活动的目标元素
:not(X)	除...之外的元素
:empty	没有任何内容的元素
:ready-only	用来指定处于只读状态的元素	3

（2）伪元素

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2
:selection	定义鼠标选中文本样式	3

欢迎补充纠正~~♪(^∇^*)