伪类和伪元素在css及css3中的区别

css伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是它们在字面上的区别。下面我们再从定义上感受一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

1.伪类

CSS3给出的定义是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

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.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

大致翻译过来的意思就是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

通过上面的概念我们知道了伪类的功能有两种：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

1.格式化DOM树以外的信息。比如：<a>标签的:link、:visited等。这些信息不存在于DOM树中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过:first-child来获取到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

2.伪元素

CSS3给出的定义如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

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).文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

大致翻译过来的意思就是：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用::before 或 ::after。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

3.伪类和伪元素的区别（CSS3下的区别）

通过上面的概念，我们就可以知道伪类与伪元素最本质的一个区别：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<ul>    
    <li>11111</li> 
    <li>22222</li>
</ul>   

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

li:first-child {    
    color: red;   
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足

而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<p>  
    <span class="first-letter">H</span>ello, World
</p>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

.first-letter {
    color: red;
}

上面的代码其实就是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p::first-letter {
    color: red;
}

所以，你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

除了上面这个本质区别以外，在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

4.主要用法

4.1伪类

1 :first-child文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配第一个子元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<ul>
    <li>111</li>
    <li>222</li>
</ul>   

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

li:first-child {
    color: red; 
    // 第一个 li 会变红
}

2 :last-child文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配最后一个子元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<ul>
    <li>aaa</li>    
    <li>bbb</li>    
    <li>ccc</li>
</ul>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

li:last-child {
    color:red; 
    // 最后一个 li 会变红
}

3 :first-of-type文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配属于其父元素的第一个特定类型的子元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<div>
    <h1>h1文本</h1>    
    <p>p文本</p>
</div>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p:first-of-type {
    color: red;  
    // <p>标签的内容变为红色
}

这里有必要强调一下:first-child与:first-of-type的区别。如果你的CSS写成:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p:first-child {
    color:red;
}

页面是不会有变化的，因为<p>元素并不是父元素<div>的第一个子元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

4 :last-of-type文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配属于其父元素的最后一个特定类型的子元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<div>    
    <h1>h1文本</h1>    
    <h1>h1文本2</h1>    
    <p>p文本</p>
</div>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

h1:last-of-type {
    color: red;  
    // 倒数第一个<h1>标签的内容变为红色(h1文本2)
}

4.2 伪元素

1 ::before文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

在被选元素之前插入内容。需要指定content属性来插入内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<p>CSS</p>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p::before {
    content: "Hi,";
}

2 ::after文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

在被选元素之后插入内容。需要指定content属性来插入内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<p>Hi, </p>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p::after {  
    content: "CSS";
}

3 ::first-letter文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配元素中文本的首字母。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<p>我在学伪元素</p>

注意：试试把<p>标签改成<p>???我在学伪元素</p>，你会发现很有意思的现象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p::first-letter {  font-size: 32px;}

4 ::first-line文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配元素中第一行的文本(只能在块元素中使用)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p::first-line {  
    color: red;
}

5 ::selection文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

匹配被用户选中的部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

HTML：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

CSS：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html

p::selection {  
    color: red;
}

最后的最后，我说的不一定都对，你一定要自己试试！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3079.html