元素选择器用于统一设置标签样式，如p{color:#333}；2. 类选择器以.开头，适用于多个元素共享样式，如.btn{}；3. ID选择器以#开头，针对唯一元素设置样式，如#header{}；4. 属性选择器根据属性匹配元素，如input[type="text"]{}；5. 后代与组合选择器通过层级关系定位，如div>p选直接子元素；6. 伪类选择器用于状态控制，如:hover、:nth-child()；7. 伪元素选择器创建虚拟内容，如::before、::after；8. 通配符选择器*匹配所有元素，常用于重置样式。合理选用可提升样式精准度与性能。
CSS选择器用于定位HTML文档中的元素，并为其应用样式。不同类型的CSS选择器适用于不同的结构和场景，合理使用可以提升代码的可维护性和性能。
1. 元素选择器（类型选择器）
匹配指定标签名称的所有元素。
适用场景：- 对某一类标签统一设置样式，如设置所有 p 标签的字体大小。
- 全局样式重置或基础样式定义。
p { color: #333; }2. 类选择器（Class Selector）
通过 class 属性选择元素，以 . 开头。
适用场景：- 多个元素需要共享相同样式时。
- 组件化开发中为特定模块添加样式。
- JavaScript 动态操作样式的常用方式。
.btn { padding: 10px; }
.highlight { background: yellow; }3. ID 选择器
通过元素的 id 属性进行选择，以 # 开头。
立即学习“前端免费学习笔记（深入）”；
适用场景：- 唯一标识某个特定元素，如页面头部 #header。
- 锚点跳转或 JavaScript 精准操作特定元素。
#main-nav { width: 100%; }4. 属性选择器
根据元素是否具有某个属性或属性值来选择。
适用场景：
- 为带有特定属性的元素设置样式，如 input[type="text"]。
- 处理表单元素或自定义数据属性（data-*）。
- 响应式图片（如根据 srcset 或 sizes）。
input[type="submit"] { background: blue; }
a[href^="https"]::after { content: " ?"; }5. 后代选择器与组合选择器
通过元素之间的层级关系选择目标元素。
常见形式：- 后代选择器：空格分隔，如 div p 选 div 内所有 p。
- 子选择器：>，只选直接子元素。
- 相邻兄弟选择器：+，选紧接在后的同级元素。
- 通用兄弟选择器：~，选后面所有同级元素。
- 精确控制嵌套结构中的样式，如导航菜单项。
- 实现“下一个段落加边距”等排版需求。
nav > ul > li { display: inline-block; }
h2 + p { margin-top: 0; }6. 伪类选择器
用于选择元素的特定状态。
常见伪类：- :hover、:focus：交互状态。
- :nth-child()、:first-child：按位置选择。
- :not()：排除某些元素。
- :checked：表单选中状态。
- 按钮悬停效果。
- 表格隔行变色：tr:nth-child(even)。
- 隐藏未激活的选项卡。
a:hover { color: red; }
li:nth-child(odd) { background: #f0f0f0; }7. 伪元素选择器
用于创建虚拟元素，如内容前后插入。
常见伪元素：- ::before、::after：生成装饰性内容。
- ::first-line、::first-letter：排版美化。
- 添加图标、引号等装饰内容。
- 清除浮动（clearfix 技巧）。
- 文章首字下沉效果。
.quote::before { content: "❝"; }
.clearfix::after { content: ""; display: table; clear: both; }8. 通配符选择器
使用 * 匹配所有元素。
适用场景：- 全局重置样式，如去除默认边距。
- 调试时临时查看所有元素表现。
* { margin: 0; padding: 0; box-sizing: border-box; }基本上就这些常见的CSS选择器类型。根据实际结构和需求选择合适的选择器，能有效提高样式的精准度和可维护性。不复杂但容易忽略的是层级关系和特异性问题，建议尽量保持选择器简洁。
