CSS伪类和为元素

Love The Way You Lie 2023-02-22 12:08 6阅读 0赞

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

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

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

## **伪类与伪元素** ##

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

### 伪类 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

## 伪元素 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

## 伪类与伪元素的区别 ##

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

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

现在，我想给第一个元素添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：

//HTML
 <ul>
 <li class="first-item">我是第一个</li>
 <li>我是第二个</li>
 </ul>
 
 //CSS
 .first-item{
 color:pink;
 font-size:18px;
 }

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

li:first-child{
      color:pink;
      font-size:18
    }

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

Hello world,and wish you have a happy day!

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

//HTML
 Hello world,and wish you have a happy day!
 
 //CSS
 span{
 color:pink;
 font-size:18px;
 }

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

p:first-letter{
      color:pink;
      font-size:18px;
    }

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

下面是一个简单的代码片段

//HTML
 hello world

现在，我想当鼠标悬停时，元素被激活时，元素被选中时有相同的样式：

span:focus, span:hover, span:active{
                border-bottom: 4px solid #b4a078;
                color: #b4a078!important;
     }

现在，我想给段落中的第一个字母和第一行设置相同的样式：

//HTML 
 Hello world,and wish you have a happy day!
 //CSS
 p:first-letter:first-line{
 color:pink;
 font-size:18px;
 }

上述代码实现不了预想的结果。

根据上面的例子我们可以发现，可以同时使用多个伪类，而只能同时使用一个伪元素；

伪元素是使用单冒号还是双冒号？

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。  
然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。

一些老旧的浏览器不支持双冒号的写法，因此如果必须兼容旧浏览器，则应该使用单冒号写法。IE 从 9 开始支持双冒号写法。

伪类

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 2][]

伪元素

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 3][]

转载：[css伪类和伪元素区别][css]

[hover]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover
[visited]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited
[checked]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200708231320648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200708231449405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200708233450907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200708233419802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[css]: https://www.jianshu.com/p/ff77f23c24f0