CSS的伪类和伪元素

电玩女神 2023-01-08 14:29 157阅读 0赞

#### 定义 ####

**伪类**:  
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;
    }

如果不创建一个元素，我们可以通过设置

的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

<p>Hello World, and wish you have a good day!</p>
    
    p:first-letter {
        font-size: 5em;
    }

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

#### 总结: ####

*  伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
 *  伪元素本质上是创建了一个有内容的虚拟容器；
 *  CSS3中伪类和伪元素的语法不同；
 *  可以同时使用多个伪类，而只能同时使用一个伪元素；

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS】CSS 伪类和伪元素

目录 1. 什么是伪类和伪元素？ 1.1 伪类 1.2 伪元素 2. 伪

红太狼/ 2023年02月15日 15:54/ 0 赞/ 52 阅读

相关 CSS的伪类和伪元素

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

电玩女神/ 2023年01月08日 14:29/ 0 赞/ 158 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 182 阅读

相关 CSS伪类和伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

ゝ一世哀愁。/ 2022年12月06日 12:45/ 0 赞/ 244 阅读

相关 CSS中的伪元素和伪类

CSS伪类什么叫伪类呢？伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和

逃离我推掉我的手/ 2022年11月07日 11:52/ 0 赞/ 214 阅读

相关 css伪类和伪元素的区别

原文链接：[http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-el

女爷i/ 2022年07月30日 19:51/ 0 赞/ 266 阅读

相关 css伪类与伪元素

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。

电玩女神/ 2022年07月26日 00:06/ 0 赞/ 318 阅读

相关 css中伪类和伪元素的区别

1.css中的伪类：伪类是基于当前元素所处的状态，也就是当前元素所具有的特性而不是元素的id、class等静态的标志。常见的伪类类型和作用： ![0119135555

待我称王封你为后i/ 2022年06月17日 06:50/ 0 赞/ 230 阅读

相关 css中的伪类与伪元素

a:link { } / 未访问链接/ a:visited { }/ 已访问链接 / a:hover {

桃扇骨/ 2021年09月15日 06:14/ 0 赞/ 451 阅读

相关 css伪类、伪元素选择器

`1.伪类选择器` 条件一：根据元素不同的状态，自动选择不同的样式。或条件二，直接添加一个class，再给这个class添加特定的样式。 A.伪类的语法：（

忘是亡心i/ 2021年09月14日 00:14/ 0 赞/ 567 阅读