CSS选择器大全：从基础到高级的30种选择器
CSS选择器是前端开发中精准定位HTML元素并施加样式规则的核心工具，通过多样化的匹配模式实现灵活控制。从基础的元素选择到复杂的伪类组合，掌握选择器的使用能显著提升样式编写的效率和可维护性。以下从基础到高级分类整理30种核心选择器，结合实际案例与注意事项，帮助开发者系统掌握CSS选择体系。
一、基础选择器（6种）
1.元素选择器（Type Selector）
通过HTML标签名直接匹配元素，例如：
p{color:red;}/* 所有<p>元素字体变红 */特点：全局匹配，优先级最低，常用于重置默认样式或全局基础样式。
2.类选择器（Class Selector）
通过class属性匹配元素，以.开头，例如：
.button{background:#3498db;}/* 所有class含"button"的元素 */进阶用法：
- 多类选择：
.warning.important匹配同时包含两个类的元素。 - 元素限定：
div.warning仅匹配<div class="warning">。
3.ID选择器（ID Selector）
通过唯一id属性匹配元素，以#开头，例如：
#header{height:80px;}/* 仅匹配id="header"的元素 */注意事项：ID在页面中必须唯一，重复使用会导致样式冲突，通常与JavaScript交互配合使用。
4.通用选择器（Universal Selector）
匹配所有元素，以*表示，例如：
*{margin:0;padding:0;}/* 重置所有元素外边距和内边距 */性能警告：过度使用会遍历整个DOM树，影响渲染性能，建议仅在必要场景（如样式重置）使用。
5.属性选择器（Attribute Selector）
根据元素属性及值匹配，支持多种匹配模式：
- 精确匹配：
[type="submit"]匹配type="submit"的按钮。 - 包含匹配：
[class*="btn"]匹配class包含btn的元素。 - 开头匹配：
[href^="https"]匹配HTTPS链接。 - 结尾匹配：
[src$=".png"]匹配PNG图片。
案例：为所有外部链接添加图标：
a[href^="http"]::after{content:" 🔗";font-size:0.8em;}6.分组选择器（Grouping Selector）
通过逗号分隔多个选择器，统一应用样式，例如：
h1, h2, h3{font-family:'Arial',sans-serif;}/* 统一标题字体 */优势：减少代码冗余，提升可维护性。
二、层次选择器（5种）
7.后代选择器（Descendant Selector）
通过空格分隔选择器，匹配嵌套元素，例如：
nav a{color:white;}/* <nav>内的所有<a> */特点：不限层级深度，可能匹配非直接子元素。
8.子元素选择器（Child Selector）
通过>匹配直接子元素，例如：
ul > li{list-style:none;}/* 仅<ul>的直接子<li> */对比后代选择器：更精确，避免误匹配深层嵌套元素。
9.相邻兄弟选择器（Adjacent Sibling Selector）
通过+匹配紧邻的下一个兄弟元素，例如：
h2 + p{margin-top:0;}/* 紧接<h2>后的第一个<p> */场景：控制标题与段落间距，避免全局p样式影响。
10.通用兄弟选择器（General Sibling Selector）
通过~匹配后续所有兄弟元素，例如：
h2 ~ p{color:#666;}/* <h2>后的所有<p> */区别相邻选择器：匹配范围更广，不要求紧邻。
11.猫头鹰选择器（:has() Pseudo-class）
CSS4新增选择器，匹配包含特定子元素的父元素，例如：
div:has(> img){border:1px solid #ddd;}/* 包含<img>的<div> */浏览器支持：需注意兼容性，目前主流浏览器逐步支持。
三、伪类选择器（10种）
12.动态伪类（Link & User Action）
:link：未访问链接。:visited：已访问链接。:hover：鼠标悬停。:active：激活状态（如点击时）。
顺序建议：link → visited → hover → active（LVHA规则），确保样式正确覆盖。
13.表单状态伪类
:focus：获得焦点（如输入框选中）。:disabled：禁用状态。:checked：选中状态（复选框/单选按钮）。:valid/:invalid：表单验证通过/失败。
案例：高亮必填字段：
input:required{border-left:3px solid red;}14.结构伪类（Structural Pseudo-classes）
:first-child：第一个子元素。:last-child：最后一个子元素。:nth-child(n)：第n个子元素（支持公式如2n+1）。:nth-of-type(n)：同类型第n个子元素。
案例：斑马条纹表格：
tr:nth-child(even){background:#f9f9f9;}15.否定伪类（Negation Pseudo-class）
通过:not()排除特定元素，例如：
button:not(.disabled){cursor:pointer;}/* 非禁用按钮 */16.目标伪类（Target Pseudo-class）
匹配URL片段标识的元素，例如：
:target{background:yellow;}/* 锚点目标元素高亮 */17.语言伪类（Language Pseudo-class）
根据lang属性匹配，例如：
:lang(en){quotes:'"''"';}/* 英文引号样式 */18.空元素伪类（Empty Pseudo-class）
匹配无内容的元素，例如：
.box:empty{display:none;}/* 隐藏空盒子 */19.范围伪类（Range Pseudo-classes）
匹配输入值在指定范围的元素，例如：
input[type="number"]:in-range{border-color:green;}20.方向伪类（Directionality Pseudo-class）
匹配文本方向，例如：
:dir(rtl){text-align:right;}/* 右到左文本对齐 */四、伪元素选择器（5种）
21.::before / ::after
在元素内容前/后插入生成内容，例如：
.tooltip::after{content:"↑";position:absolute;}注意：必须指定content属性，即使为空。
22.::first-letter
匹配首字母，例如：
p::first-letter{font-size:2em;}/* 首字母放大 */23.::first-line
匹配首行文本，例如：
article::first-line{font-weight:bold;}24.::selection
匹配用户选中的文本，例如：
::selection{background:#3498db;color:white;}25.::marker
自定义列表标记样式，例如：
li::marker{color:red;}/* 列表项符号变红 */五、高级组合选择器（4种）
26.交集选择器（Intersection Combinator）
紧邻多个选择器匹配同时满足条件的元素，例如：
button.primary{background:blue;}/* class="primary"的<button> */27.列组合选择器（Column Combinator）
匹配表格列，例如：
col:nth-child(2){background:#eee;}/* 第二列背景色 */28.逻辑组合选择器（Logical Combinators）
:is()：匹配任意一个选择器，例如：:is(h1, h2, h3){font-family:sans-serif;}:where()：类似:is()，但优先级恒为0。
29.层级限定伪类（Scope-limited Pseudo-classes）
:scope：匹配当前上下文元素，例如：.container :scope > p{color:red;}/* .container内的直接子<p> */
30.自定义属性选择器（Custom Property Selectors）
结合CSS变量实现动态样式，例如：
[data-theme="dark"]{--bg-color:#333;}.element{background:var(--bg-color,#fff);}总结
掌握30种CSS选择器后，开发者可灵活应对复杂布局需求。实际开发中需注意：
- 优先级管理：避免过度嵌套导致特异性冲突。
- 性能优化：减少通用选择器和深层嵌套的使用。
- 浏览器兼容性：检查新特性（如
:has()）的兼容范围。
通过系统学习与实践，CSS选择器将成为提升开发效率与代码质量的有力工具。
