CSS伪元素选择器深度剖析

王,宏,高丽霞,张雪华

山东电子职业技术学院计算机与软件工程系，山东 济南 250200

【摘要】本文从CSS伪元素概念、特点、典型应用等几个方面深入阐述了伪元素的作用，并且对HTML标记与CSS伪元素在网页元素创建中的区别做了深度剖析，同时深入论述了在不更改HTML结构的情况下，通过CSS伪元素添加HTML元素或装饰内容，能更好的实现网页内容与样式的分离。

【关键词】HTML标记；CSS选择器；伪元素

0引言

在Web前端开发中CSS层叠样式表，由一系列各种类型选择器和属性构成，用于修饰网页元素样式，统一网页风格。想要修饰网页中某元素，首先需要通过CSS选择器在HTML标记中找到该目标标记。CSS伪元素选择器是CSS选择器中比较特殊的选择方式，恰当的使用CSS伪元素，可以创建HTML标记无法生成的虚拟元素，或者在特定元素之前、之后添加内容、装饰内容，而不需要更改HTML的内容，从而实现网页内容与样式更好的分离，使整个文档清晰、易读、易维护，但也较难理解和灵活应用。

1  CSS选择器

CSS (Cascading Style Sheets) 层叠样式表，CSS样式定义了所选择的HTML元素将以何种样式显示。CSS提供了丰富的样式定义，可以修饰文档中文本对齐方式、文本阴影、文本特殊效果，设置字体大小、字体颜色、字体粗体程度和字体风格，可以设置网页元素背景颜色、背景图像和背景图像的显示效果，可以设置元素的边框、元素的大小位置、元素内部填充距离、元素与元素之间的距离，以及网页元素的特殊效果，我们只需要定义CSS样式，就可以改变所有页面的布局和外观样式。CSS样式通常定义在样式表中，从而实现网页内容与样式分离，提高文档可读性、可维护性，提高代码的复用性，提高页面加载速度。例如使用HTML标记中无序列表制作网站的导航栏，将网站的导航条目逐条罗列，示例代码如下：

首页

时政

……

使用CSS样式修饰导航栏，代码如下所示：

.nav{

height: 60px;

background-color: #333;

margin-bottom: 20px;

}

.nav ul li{

list-style: none;

float: left;

padding: 0px 20px;

position: relative;

}

.nav ul li a{

text-decoration: none;

color: white; 

}

#first{

background-color: red;

}

导航栏的页面运行效果，如图1所示。

图1 CSS修饰后的导航栏

2  CSS伪元素选择器

2.1  伪元素的概念

CSS选择器中，有一种特殊选择器，伪选择器，它分为伪类选择器和伪元素选择器，称之为“伪”，顾名思义，它不是真实存在的。伪类选择器，它描述了某一类，这一类并不是我们通常定义的某个类选择器，但是可以选定网页元素的某一类状态，例如hover鼠标悬浮状态，当用户将鼠标悬浮在导航栏中导航条目上时，该导航条目背景颜色变为红色，代码如下所示：

.nav ul li:hover{

background-color: red;

}

CSS伪元素选择器，可以创建HTML标记无法生成的虚拟元素，或者在特定元素之前、之后添加HTML内容、装饰HTML内容，而不需要更改HTML的结构，这个伪元素在文档树中并不真实存在，所以称之为“伪元素”。

例如，h1:before{content: "->";color:red;}，则在网页中选择所有h1一级标题的before，并在此处设置内容为红色“->”，然而h1标记前面并没有真实存在这样的HTML内容，此时通过CSS伪元素选择器的方式，在HTML结构中添加了HTML内容，并对其轻松设置CSS样式，用法和普通的HTML元素用法是一样的。

2.2  伪元素的特点

伪元素的优点：

伪元素不是真实存在的HTML元素，所以不占用DOM节点，不会增加DOM节点数，同时通过CSS样式定义的方式，解决了一部分应该使用JavaScript方式解决的问题，简化了程序的开发，尤其避免增加修饰性的HTML页面元素，使得HTML内容与样式更好的分离。

伪元素的缺点：

伪元素并不真实存在于HTML文档结构中，它的抽象性不便于理解，它只体现在页面运行的视觉效果上，故不便于页面调试，也不会被搜索引擎读取。

2.3  伪元素的类型

常用的伪元素::before和::after，在被选择的元素之前或者之后添加HTML内容，具体添加的内容用content属性设置，该添加内容的各种样式的定义跟网页元素的样式定义一样，例如元素大小、定位、对齐、字体、颜色、背景等等。

伪元素::first-line和::first-letter，用于设置被选择文本元素的第一行和第一个字符的样式。

伪元素::placeholder，用于选择表单元素的placeholder属性，对输入框中的提示信息设置CSS样式。

3  HTML标记与CSS伪元素

当用户访问导航条目时，该条目背景变为红色，同时设置白色箭头的指向效果，如图2所示。

图2 导航条目的访问状态

3.1  使用HTML标记制作导航条目的访问状态

使用HTML标记制作图2中的白色箭头，需要在每个导航条目

li>中添加新标记b，该标记不承载任何内容，只是将其外观修饰成白色箭头的样式，HTML代码如下所示：

首页

时政

……

CSS样式对白色箭头的修饰代码如下所示：

.nav ul li b{

display: none;

width: 0px;

height: 0px;

border: 10px solid transparent;

border-bottom-color:white;

position: absolute;

left: 50%;

bottom: 0px;

margin-left: -10px;

}

白色箭头初始状态为隐藏不可见display:none;当鼠标悬浮在该条目上hover状态时，白色箭头显示出来。

.nav ul li:hover b{

display: block;

}

3.2  使用伪元素制作导航条目的访问状态

使用CSS伪元素方式制作图2中的白色箭头，则无需在HTML文档中添加新标记，只定义导航条目的::after伪元素样式即可，保持HTML结构清晰、简洁，代码如下所示：

.nav ul li:hover::after{

content: "";

/*此处代码与b标记样式定义相同*/

}

3.3  HTML标记和CSS伪元素比较

通过以上对HTML标记创建页面元素和CSS伪元素创建页面元素方法的比较研究，我们可以明确，CSS伪元素可以创建、控制HTML标记，或者HTML无法创建的虚拟元素，并对该伪元素像真实存在的HTML标记一样灵活修饰；CSS伪元素可以减少DOM节点，使HTML内容与CSS样式分离，保证HTML结构清晰，可读性、可维护性强；页面元素的样式定义在CSS样式文件中，提高代码的可重用性；样式文件单独保存为.css文件，可以提高页面的加载速度。同时，CSS伪元素并不是HTML中真实存在的页面元素，在使用时较为抽象，不易理解，难于驾驭，不理解透彻很难准确控制和灵活应用。

4  结束语

在Web前端开发中，使用HTML标记创建网页结构，使用CSS层叠样式表修饰网页元素，统一网页风格。而恰当的使用CSS伪元素，可以创建HTML标记无法生成的虚拟元素，或者在特定元素之前、之后添加内容、装饰内容，而不需要更改HTML的内容，保持HTML清晰结构，实现网页内容与样式更好的分离。

参考文献

[1]辛红.“HTML5+CSS3前端开发技术”教学实践探索.无线互联科技,2020,17(18).

[2]许晓峰.HTML5和CSS3.0在网页设计中的优势特性与应用.电脑知识与技术,2020,16(13).

[3]马春艳.浅谈CSS样式在网页文字上的应用.电脑知识与技术,2019,15(8).

[4]张萍.网页制作中p+CSS技术的应用探讨.数码世界,2019,(3).

基金项目：山东省职业教育技艺技能传承创新平台（ICT工程技术创新平台）资助