Web前端：学习CSS之如何改变CSS伪元素的样式

作者:TM0831更新于： 2020-02-26 14:34:26

　　css为html标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

　　一、CSS伪元素

　　CSS伪元素用于向某些选择器设置特殊效果。

　　伪元素的用法如下所示：

　　selector:pseudo-element{property:value;}

　　CSS类也可以和伪元素搭配使用

　　selector.class:pseudo-element{property:value;}

　　二、修改伪元素样式

　　1.问题描述

　　伪元素例子如下所示：

　　.content{width:100px;height:100px;margin:0auto;background:black;}.content::before{content:"";width:20px;height:20px;position:absolute;background:blue;}

　　如果我们想对修改伪元素的样式，又该怎么做呢？因为伪元素在DOM树中创建了一些抽象元素，但这些抽象元素是不存在于文档语言里的，即不存在于HTML源码里，所以并不能通过选择器来选择这些伪元素。既然不能选择伪元素，那要怎么才能修改伪元素的样式？

　　2.方案一

　　通过增加style标签以重新定义伪元素，实现对伪元素样式的覆盖，具体的方法如下所示：

　　$(".content").append("");

　　但这种方案有个问题，因为对原来的样式进行了覆盖，所以会对所有该类的标签产生影响。

　　3.方案二

　　更优的方案是通过增加新的CSS类来对伪元素的某些样式进行修改，具体的方法如下所示：

　　1）定义新的CSS类。

　　例如增加新的CSS类：

　　.change::before{background:red;}

　　2）添加新类以修改伪元素样式。

　　在jQuery中使用id选择器和css选择器，再使用addClass()进行添加修改，示例如下所示：

　　$("#content1").addClass("change");

　　CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。