CSS 选择器
前言
基础选择器
以下是几种常见的基础选择器。
标签选择器：通过HTML标签名称选择元素。
例如：
p {color: red;
}上述样式规则将选择所有<p>标签 ，并将其文字颜色设置为红色。
类选择器：通过类名选择元素。使用类选择器时需要在类名前加上英文句点.。
例如：
<p class="myp">这是p标签。</p>.myp {font: size 16px;
}上述样式规则将选择所有具有class="myp"属性的元素。并将它们的字体大小设置为16像素。
ID选择器：通过元素的唯一ID选择元素。使用ID选择器时，在CSS中需要在ID名称前加上井号#。
例如：
<div id="mydiv">这是一个div元素。</div>
#mydiv {background-color: blue;
}上述样式规则将选择具有id="mydiv" 的元素，并将它们的背景颜色设置为蓝色。
复合选择器
复合选择器是由多个基础选择器通过不同的方式组合而成的，用于更精确地选择目标元素。
后代选择器
后代选择器用于选择某个元素的后代元素。父子选择器之间用空格隔开。
语法：
父选择器 子选择器 {/* 样式规则 */
}示例：
选择<div>元素内部所有的<p>元素。
div p {/* 样式规则 */
}后代选择器支持多级嵌套，即可以选择更深层次的后代元素。例如：
选择<div>元素内部的<ul>元素，再选择其中的<li>元素，最后选择<li>元素内部的<a>元素。
div ul li a {/* 样式规则 */
}通过合理运用后代选择器，你可以针对特定的HTML结构来选择需要应用样式的元素，实现更精确的样式控制。
子代选择器
子代选择器用于选择某个元素的直接子元素。父子选择器之间用 > 符号隔开。
语法：
父选择器 > 子选择器 {/* 样式规则 */
}示例：
选择<div>元素下直接的所有<p>元素。
div > p {/* 样式规则 */
}相比于后代选择器，子代选择器的作用范围更加精确，只选择直接子元素，不包括孙子元素及以下元素。
并集选择器
并集选择器用于同时选择多个不同类型的元素或相同类型的元素。选择器之间用 , 隔开。
语法：
选择器1, 选择器2, 选择器3 {/* 样式规则 */
}示例：
同时选择<h1>和<h2>元素。
h1, h2 {/* 样式规则 */
}通过合理运用并集选择器，你可以灵活地选择多个元素，并对它们进行统一的样式设置，实现样式的复用和统一管理。
伪类选择器-超链接
在CSS中，可以使用伪类选择器为超链接元素（<a>标签）应用不同的样式。以下是几个常用的超链接伪类选择器：
| 选择器 | 作用 |
|---|---|
| :link | 匹配未访问的连接状态 |
| :visited | 匹配已访问的链接状态 |
| :hover | 匹配鼠标悬停在链接上的状态 |
| :active | 匹配被激活（点击）的状态 |
示例：
a:link {color: blue;
}a:visited {color: purple;
}a:hover {text-decoration: underline;
}a:active {color: red;
}上述代码中，:link 选择器设置未访问的链接为蓝色，:visited 选择器设置已访问的链接为紫色，:hover 选择器在鼠标悬停时添加下划线，:active 选择器在被点击时将链接颜色设为红色。
需要注意的是，在设置超链接的颜色时，应该按照 :link、:visited、:hover、:active 的顺序进行设置，以确保样式生效。
结构伪类选择器
结构伪类选择器是CSS中一种用于选择元素在其位置上的特殊状态或结构关系的选择器。它们依赖于元素在文档中的位置、层次结构或其他结构性属性来进行选择。
以下是几个常用的结构伪类选择器：
| 选择器 | 说明 |
|---|---|
| :first-child | 选取父元素下的第一个子元素 |
| :last-child | 选取父元素下的最后一个子元素 |
| :nth-child(n) | 选取父元素下的第n个子元素，可以使用数字、关键字（如even表示偶数，odd表示奇数）或公式形式（如2n+1）进行指定。 |
| :nth-last-child(n) | 与 :nth-child(n) 类似，但从末尾开始计数。 |
| :only-child | 选取父元素中唯一一个子元素。 |
伪元素选择器
示例：
测试HTML代码：
<ul><li>li-1</li><li>li-2</li><li>li-3</li><li>li-4</li><li>li-5</li><li>li-6</li><li>li-7</li><li>li-8</li><li>li-9</li><li>li-10</li>
</ul>预览：
1.选取第一个<li>标签，并设置背景颜色：
li:first-child {background-color: green;
}预览：
2.选取前5个<li>标签，并设置背景颜色：
li:nth-child(-n+5) {background-color: green;
}预览：
需要注意的是，结构伪类选择器只会考虑该元素在其父元素的直接子元素中的位置，而不会考虑更深层次的关系。
伪元素选择器
伪元素选择器用于选择元素的特定部分，而不是整个元素本身。它们以双冒号 :: 开头。
以下是常用的伪元素选择器：
| 选择器 | 说明 |
|---|---|
| ::before | 在目标元素的内容前面插入一个虚拟元素，并可以通过CSS设置其样式。 |
| ::after | 在目标元素的内容后面插入一个虚拟元素，并可以通过CSS设置其样式。 |
| ::first-letter | 选取目标元素的第一个字母或汉字，并可以通过CSS设置其样式。 |
| ::first-line | 选取目标元素的第一行文本，并可以通过CSS设置其样式。 |
| ::selection | 选取用户选择的文本部分，并可以通过CSS设置选择文本的样式。 |
伪元素选择器可以为页面增加一些装饰或样式效果，例如下图的侧导航的小箭头
示例：
在按钮文本前面插入一个图标。
HTML代码：
<button class="icon-button">Click Me</button>CSS代码：
.icon-button::before {content: "\f054"; /* 使用Unicode或CSS content值指定图表内容 */font-family: font awesome; /* 使用自定义字体或图标库 */margin-right: 5px; /* 调整图标与文本间距离 */
}预览：
