CSS的伪类和伪元素

定义

伪类:
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

伪元素:
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
下例中的 ::first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

分类：

伪类：

• :active，将样式添加到被激活的元素。
• :focus，将样式添加到被选中的元素。
• :hover，当鼠标悬浮在元素上方是，向元素添加样式。
• :link，将特殊的样式添加到未被访问过的链接。
• :visited，将特殊的样式添加到被访问的链接。
• :first-child，将特殊的样式添加到元素的第一个子元素。
• :lang，允许创作者来定义指定的元素中使用的语言。

伪元素：

• :first-letter，将特殊的样式添加到文本的首字母。
• :first-line，将特殊的样式添加到文本的首行。
• :before，在某元素之前插入某些内容。
• :after，在某元素之后插入某些内容。

区别：

下面是一个简单的html列表片段：

<ul>
    <li>我是第一列</li>
    <li>我是第二列</li>
</ul>

如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式：

<ul>
    <li class="first-item">我是第一列</li>
    <li>我是第二列</li>
</ul>

li.first-item {
    color: orange
}

如果不用添加类的方法，我们可以通过给设置第一个的:first-child伪类来为其添加样式。这个时候，被修饰的元素依然处于文档树中。

li:first-child {
    color: orange
}

下面是另一个简单的html段落片段：

<p>Hello World, and wish you have a good day!</p>

 如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：

    <p><span class="first">H</span>ello World, and wish you have a good day!</p>

.first {
    font-size: 5em;
}

 如果不创建一个元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

<p>Hello World, and wish you have a good day!</p>

p:first-letter {
    font-size: 5em;
}

从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

总结:

• 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
• 伪元素本质上是创建了一个有内容的虚拟容器；
• CSS3中伪类和伪元素的语法不同；
• 可以同时使用多个伪类，而只能同时使用一个伪元素；
  
  
  
  
  我组建了一个前端学习交流群，学习前端技术。给大家分享学习资料，给大家匹配学习伙伴，定期组织大家进行项目实战。想要加入一起学习的小伙伴可以点击链接加入群聊【web前端技术群】：前端学习交流