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

css伪类和伪元素的区别其实很简单，从字面上看就可以了。他们共用一个修饰语“伪”，那么“伪”是什么意思呢？这只是假的。所以 伪类 是一个模拟类，而伪元素是一个模拟元素，这就是它们之间的字面区别。我们来看看下面的定义。

1.伪类

CSS3 提供的定义是：

引入伪类概念是为了允许基于文档树之外的信息或无法使用其他简单选择器表达的信息进行选择。

大致翻译的意思是：伪类通过和选择器信息来格式化DOM树以外的信息，这些信息是传统CSS选择器无法获得的。

通过以上概念，我们知道伪类有两个功能：

1。格式化 DOM 树以外的信息。例如：标签:link、:visited等。该信息在DOM树中不存在。

2。使用常规 CSS 选择器无法获取的信息。例如：我们不能使用常规 CSS 选择器来获取第一个子元素，但我们可以通过 :first-child 来获取它。

2。伪元素

CSS3 提供了以下定义：

伪元素创建超出文档语言指定的有关文档树的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者链接到这些否则不可用的信息。伪元素还可以为作者提供一种引用源文档中不存在的内容的方法（例如：:before 和 ::after 伪元素允许访问生成的内容）。

粗略翻译的意思是：伪-元素可以创建一些文档语言无法创建的虚拟元素。例如：文档语言没有描述元素内容的第一个字母或第一行的机制，但伪元素可以（ ::first-letter, ::first-line ）。同时，伪元素可以创建源文档中不存在的内容，例如使用 ::before 或 ::after。

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

通过以上概念，我们可以知道 伪类 和伪元素最本质的区别：

伪类 其实平衡了 CSS 选择器的不足，用来更方便的获取信息；

HTML：

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

CSS：

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

伪元素本质上创建了一个虚拟容器（元素），我们可以在其中添加内容或样式。

HTML:

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

CSS:

.first-letter {
    color: red;
}

上面的代码实际上是：

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

所以你可以理解伪元素基本上创建了一个虚拟容器（元素）

.first-letter {
    color: red;
}

除了上面提到的根本区别之外，在 CSS3 中伪类由单个冒号 : 表示；而伪元素则用冒号 :: 表示。一个选择器可以同时使用多个元素（但有些元素是互斥的）；并且选择器一次只能使用一个伪元素（未来版本可能支持多个伪元素）。

4。主要用途

4.1 伪类

1：第一个子元素

对应第一个子元素。

HTML:

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

CSS:

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

2 :last-child

对应于最后一个子元素。

HTML:

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

CSS:

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

3 :first-of-type

匹配属于其父元素的特定类型的第一个子元素。

HTML:

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

CSS:

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

这里有必要强调一下:第一个孩子和‼️‼️如果你的CSS写成：

p:first-child {
    color:red;
}

, 的page 不会更改，因为元素

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

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

<p>CSS</p>

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

<p>Hi, </p>

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

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

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

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

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

p::selection {  
    color: red;
}