本文介绍了CSS中的结构伪类选择器（如:hover、:focus等）和伪元素选择器（如::before和::after），通过示例展示了如何使用这些选择器改变HTML元素的样式，包括奇数/偶数列表的样式处理和在元素内容前后插入自定义内容。
概要
结构伪类选择器是CSS中的一种选择器，用于基于文档结构选择元素。这些选择器通常用于模仿或者替代JavaScript中的事件处理器，使得你可以仅通过CSS样式就能对文档中的某些结构位置或者状态进行样式设计。结构伪类选择器能够选择元素在其生命周期中的特定时刻的状态，比如当用户悬停在链接上时，或者当元素是其父元素的第一个子元素时。
以下是一些常用的结构伪类选择器：
:hover - 选择鼠标悬停在上面的元素。（常用于导航条）
:focus - 选择拥有焦点的元素。
:active - 选择被激活的元素（例如，被点击的链接）。
:visited 和 :link - 分别选择已访问和未访问的链接。
:first-child 和 :last-child - 选择某个元素的第一个或最后一个子元素。
:nth-child() - 选择某个元素的第二个、第五个等指定索引的子元素。
:not() - 选择不符合指定规则的元素。
伪元素选择器是CSS中用来选择和 style 某些特定的行内元素或者文档中的特定位置（比如在某个元素之前或者之后）的一种机制。它们通常用来在不改变文档结构的情况下对内容进行装饰或者修改。
以下是一些常用的伪元素选择器：
::before - 在选定元素的内容前插入内容。
::after - 在选定元素的内容后插入内容。
::first-letter - 选定元素的第一封信首字母样式。
::first-line - 选定元素的第一行文本样式。
::selection - 选定元素中被用户选中的文本样式。
伪元素选择器通常需要一个双冒号::，这是为了与伪类选择器（如:hover）区分开来。
代码解析
接下来将通过一些简单的代码来讲解结构伪类选择器和伪元素选择器。
1、结构伪类选择器
这里以:first-child 和 :last-child和:nth-child()举例：
首先定义一个列表，将列表进行初步的美化。
现在我们要对列表1、3、5分别进行颜色的改变，我们可以通过结构伪类选择器达到目的：
运行结果图：
如果我们要对奇数或者偶数列表进行相同的改变可以使用：
运行结果如下：
2、伪元素选择器
接下来以::before(在选定元素的内容前插入内容)::after(在选定元素的内容后插入内容)举例：
运行结果如下：
小结
在对奇数或者偶数列表进行相同的改变，我们也可以用到：
本章讲解的代码如下：
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style: none;
}
ul li {
background-color: aquamarine;
}
/* ul li:first-child {
background-color: red;
}
ul li:nth-child(3) {
background-color: yellow;
}
ul li:last-child {
background-color: green;
} */
/* 奇数行
ul li:nth-child(2n-1) {
background-color: yellow;
}
*/
ul li:nth-child(odd) {
background-color: yellow;
}
/* 偶数行
ul li:nth-child(2n) {
background-color: red;
}
*/
ul li:nth-child(even) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>列表标题1</li>
<li>列表标题2</li>
<li>列表标题3</li>
<li>列表标题4</li>
<li>列表标题5</li>
</ul>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div::before {
content: "/******/";
color: aliceblue;
}
div::after {
content: "/******/";
}
</style>
</head>
<body>
<div>新闻介绍</div>
<div>新闻介绍</div>
<div>新闻介绍</div>
</body>
</html>
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
