> 在Web开发的世界里，CSS选择器是连接HTML结构与视觉表现的桥梁，掌握它们意味着获得了精确控制页面每一个元素的强大能力。
一、 基础选择器：构建样式的基石
基础选择器是CSS的入门钥匙，它们直接而明确地指向目标元素：
1. 元素选择器（类型选择器）:
css
p {
color: blue;
选择所有 `` 标签，将其文字颜色设为蓝色。
2. 类选择器（Class Selector）:
css
highlight {
background-color: yellow;
选择所有 `class` 属性包含 `highlight` 的元素（如 `
3. ID选择器（ID Selector）:
css
main-header {
font-size: 2em;
选择 `id` 属性为 `main-header` 的唯一元素（如 `4. 通用选择器（Universal Selector）:
css
{
margin: 0;
padding: 0;
box-sizing: border-box; / 推荐的最佳实践 /
选择页面中的所有元素。常用于重置默认样式或设置全局盒模型。
5. 属性选择器（Attribute Selector）:
根据元素的属性及其值进行选择：
css
a[href] { / 所有带有href属性的标签 /
text-decoration: underline;
input[type="text"] { / 所有type="text"的 /
border: 1px solid ccc;
a[href^="https"] { / href以"https"开头的 /
color: green;
img[alt~="logo"] { / alt属性包含单词"logo"的 /
border: 2px solid gold;
二、 组合选择器：建立元素关系网络
组合选择器通过元素之间的关系实现更精确的选择：
1. 后代选择器（Descendant Selector）: (空格)
css
article p {
line-height: 1.6;
选择所有位于 `` 元素内部的 `` 元素（无论嵌套多深）。
2. 子元素选择器（Child Selector）: (`>`)
css
ul > li {
list-style-type: square;
选择所有作为 `- ` 直接子元素的 `
- ` 元素。不作用于更深层的孙辈元素。
3. 相邻兄弟选择器（Adjacent Sibling Selector）: (`+`)
css
h2 + p {
margin-top: 0.5em;
选择紧跟在 `` 元素之后的第一个 `
` 兄弟元素。
4. 通用兄弟选择器（General Sibling Selector）: (`~`)
css
h2 ~ p {
color: 666;
选择所有在 `` 元素之后
的 `` 兄弟元素（不要求紧邻）。
三、 伪类与伪元素：超越静态的选择
它们允许基于状态、位置或DOM中不直接存在的结构进行选择。
1. 常见结构伪类:
css
li:first-child { / 选择其父元素中的第一个 - /
font-weight: bold;
li:last-child { / 选择最后一个 - /
border-bottom: none;
li:nth-child(odd) { / 选择所有奇数位置的 - /
background-color: f9f9f9;
tr:nth-of-type(3n) { / 选择每第3个
/ background-color: eee;
2. 用户交互伪类:
css
a:hover { color: red; } / 鼠标悬停时 /
input:focus { outline: 2px solid blue; } / 获得焦点时 /
button:active { transform: scale(0.98); } / 被激活（如按下）时 /
input:disabled { opacity: 0.6; } / 被禁用的输入框 /
input:checked + label { font-weight: bold; } / 复选框/单选选中时 /
3. 表单伪类:
css
input:required { border-left: 2px solid red; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:in-range { / 值在min/max范围内 / }
4. 功能强大的新伪类:
css
:is(article, section) h1 { / 选择或内的 /
font-size: 1.8em;
:where(header, footer) a { / 选择或