摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。
伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。而当概念都混淆的时候，也往往意味着你不会经常使用它，怕出错，怕用不好。而这也会大大影响你的效率，本来几行代码就可以完成的工作，却要写上一大堆......所以，花点时间理清楚每一个看似微小的概念，会让我们的编程更有效率。下面进入正题。
伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。下面我们再从定义上感受一下。
1.伪类CSS3给出的定义是：
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
大致翻译过来的意思就是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种：
1.格式化DOM树以外的信息。比如：标签的:link、:visited等。这些信息不存在于DOM树中。
2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过:first-child来获取到。
2.伪元素CSS3给出的定义如下：
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element"s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
大致翻译过来的意思就是：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用::before 或 ::after。
3.伪类和伪元素的区别（CSS3下的区别）通过上面的概念，我们就可以知道伪类与伪元素最本质的一个区别：
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息；
HTML:
CSS：
li:first-child {
color: red;
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足
而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
HTML：
Hello, World
CSS：
.first-letter {
color: red;
}
上面的代码其实就是：
p::first-letter {
color: red;
}
所以，你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。
除了上面这个本质区别以外，在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。
4.主要用法1 :first-child
匹配第一个子元素。
HTML：
CSS：
li:first-child {
color: red; // 第一个 li 会变红
}
2 :last-child
匹配最后一个子元素。
HTML：
CSS：
li:last-child {
color:red; // 最后一个 li 会变红
}
3 :first-of-type
匹配属于其父元素的第一个特定类型的子元素。
HTML：
h1文本
p文本
CSS：
p:first-of-type {
color: red; // 标签的内容变为红色
}
这里有必要强调一下:first-child与:first-of-type的区别。如果你的CSS写成:
p:first-child {
color:red;
}
页面是不会有变化的，因为
元素并不是父元素
4 :last-of-type
匹配属于其父元素的最后一个特定类型的子元素。
HTML：
h1文本
h1文本2
p文本
CSS：
h1:last-of-type {
color: red; // 倒数第一个标签的内容变为红色(h1文本2)
}
1 ::before
在被选元素之前插入内容。需要指定content属性来插入内容。
HTML：
CSS
CSS：
p::before {
content: "Hi,";
}
2 ::after
在被选元素之后插入内容。需要指定content属性来插入内容。
HTML：
Hi,
CSS：
p::after {
content: "CSS";
}
3 ::first-letter
匹配元素中文本的首字母。
HTML：
我在学伪元素
注意：试试把 标签改成 ???我在学伪元素
CSS：
p::first-letter {
font-size: 32px;
}
4 ::first-line
匹配元素中第一行的文本(只能在块元素中使用)。
HTML：
我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素
CSS：
p::first-line {
color: red;
}
5 ::selection
匹配被用户选中的部分。
HTML：
我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素
CSS：
p::selection {
color: red;
}
最后的最后，我说的不一定都对，你一定要自己试试！
(本文完)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115764.html
摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。 之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...
摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。 之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...
摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。 一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...
摘要：本文首发于我的博客在前面两篇文章你不知道的一和你不知道的二中大致介绍了一些方面比较隐晦的但又很实用的技巧。系列文章你不知道的一你不知道的二本文首发于我的博客 本文首发于我的博客 在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇...
摘要：选择器基础选择器标签选择器针对一类标签注意选择的所有，而不是一个。元素元素是文档结构的基础。行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素内容中，而不会破坏其显示。 css选择器 基础选择器 1.标签选择器：针对一类标签 注意：选择的所有，而不是一个。 p{ font-size:14px; } css 2.ID选择器：针对某一个特定的标签使用，只能使...
阅读 2630·2021-11-24 09:38
阅读 3397·2021-11-23 09:51
阅读 708·2021-09-09 11:52
阅读 3892·2021-08-11 11:18
阅读 971·2019-08-30 14:05
阅读 3082·2019-08-30 11:23
阅读 1616·2019-08-29 17:02
阅读 999·2019-08-26 13:49
