CSS选择器用于精准选中HTML元素并应用样式，包括基础选择器（如元素、类、ID、通配符）、组合选择器（后代、子元素、相邻和通用兄弟）、属性选择器（按属性及值匹配）以及伪类和伪元素选择器（用于状态和虚拟内容），合理使用可提升样式的灵活性与维护性。
CSS选择器是网页样式设计的核心工具，用来选中HTML元素并为其应用样式。掌握不同类型的CSS选择器，能更精准、高效地控制页面布局和外观。下面介绍常见的CSS选择器类型及其作用。
1. 基础选择器
基础选择器是最常用的一类，适用于大多数简单场景。
-
元素选择器：通过标签名选中元素。例如 p { color: blue; } 会选中所有
<p>标签。 - 类选择器：以点号（.）开头，选中具有指定class的元素。如 .highlight { background: yellow; } 可为所有 class="highlight" 的元素设置背景色。
- ID选择器：以井号（#）开头，选中具有特定ID的元素。例如 #header { width: 100%; }，ID在页面中应唯一。
- 通配符选择器：用 * 表示，匹配所有元素。常用于重置默认样式，如 * { margin: 0; padding: 0; }。
2. 组合选择器
组合选择器通过组合多个基础选择器，实现更精确的匹配。
-
后代选择器：用空格分隔，选中某元素内部的所有指定后代。例如 div p 会选中所有在
<div>内部的<p>元素。 -
子元素选择器：使用 > 符号，仅选中直接子元素。如 ul > li 只选中
<ul>的直接子项<li>，不包括嵌套层级更深的。 -
相邻兄弟选择器：用 + 连接，选中紧接在另一元素后的兄弟元素。例如 h2 + p 选中紧跟在
<h2>后的第一个<p>。 -
通用兄弟选择器：用 ~ 连接，选中前面有某元素的所有同级兄弟。如 h2 ~ p 会选中所有在
<h2>之后的同层<p>元素。
3. 属性选择器
属性选择器根据元素的属性及属性值进行匹配，适合处理表单或动态内容。
立即学习“前端免费学习笔记（深入）”；
- [type="text"]：选中所有 type 属性等于 "text" 的元素。
- [href]：选中所有带有 href 属性的元素，比如链接。
- [class^="btn-"]：选中 class 属性值以 "btn-" 开头的元素，支持前缀匹配。
- [src$=".png"]：匹配 src 属性以 ".png" 结尾的图片。
- [data-role~="modal"]：匹配 data-role 属性中包含单词 "modal" 的元素。
4. 伪类与伪元素选择器
这类选择器用于选中元素的特殊状态或生成虚拟内容。
-
伪类选择器：以 : 开头，表示元素的特定状态。例如：
- :hover：鼠标悬停时的样式。
- :focus：元素获得焦点时，常用于输入框。
- :nth-child(n)：选中父元素下的第 n 个子元素，支持奇偶选择如 :nth-child(odd)。
- :first-of-type：选中同类型中的第一个元素。
-
伪元素选择器：以 :: 开头，创建虚拟元素。常见有：
- ::before 和 ::after：在元素内容前后插入装饰性内容，常配合 content 属性使用。
- ::first-line：选中块级元素的第一行文本。
- ::selection：定义用户选中文本时的高亮样式。
基本上就这些。熟练运用这些选择器，能大幅提升CSS的灵活性和可维护性。实际开发中建议优先使用类选择器，避免过度依赖ID或深层嵌套，保持样式清晰高效。
