CSS 选择器详解

/* 元素选择器 */
p  { color: #333; line-height: 1.6; }
h1 { font-size: 2rem; font-weight: 700; }

/* 类选择器（主力） */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button--primary   { background-color: #007bff; }
.button--secondary { background-color: #6c757d; }

/* ID 选择器（慎用） */
#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

/* 通用选择器：常用于重置 */
* { box-sizing: border-box; }

/* 属性选择器 */
input[type="text"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
a[href^="https"]        { color: #007bff; }   /* 外链 */
a[href$=".pdf"]::after  { content: ' (PDF)'; } /* PDF 链接加标记 */
img[alt*="logo"]        { border: 2px solid #007bff; }
[data-state="loading"]  { opacity: 0.5; }

/* 后代选择器 */
.container p { margin-bottom: 1rem; }

/* 子选择器 */
.nav > .nav-item { padding: 10px; }

/* 相邻兄弟：段落紧跟标题时做引言样式 */
h1 + p { font-size: 1.2rem; font-weight: 600; }

/* 通用兄弟 */
h1 ~ p { color: #666; }

/* 分组 */
h1, h2, h3 { font-weight: 700; margin-bottom: 0.5rem; }

/* 链接伪类（顺序建议 LVHA） */
a:link    { color: #007bff; }
a:visited { color: #6c757d; }
a:hover   { color: #0056b3; text-decoration: underline; }
a:active  { color: #004085; }

/* 表单伪类 */
input:focus         { outline: 2px solid #007bff; outline-offset: 2px; }
input:focus-visible { outline: 2px solid #0056b3; }
input:checked       { accent-color: #007bff; }
input:disabled      { opacity: 0.5; cursor: not-allowed; }
input:invalid       { border-color: #dc3545; }

/* focus-within：输入框聚焦时高亮整个表单组 */
.form-group:focus-within { background: #f0f8ff; }

/* 结构伪类 */
li:first-child     { font-weight: 700; }
li:last-child      { margin-bottom: 0; }
li:nth-child(2n)   { background-color: #f5f5f5; }  /* 斑马纹 */
li:nth-child(3n+1) { color: #007bff; }             /* 每 3 个的第 1 个 */
li:only-child      { list-style: none; }
p:empty           { display: none; }

/* 逻辑伪类 */
.nav-item:not(.active) { opacity: 0.7; }
:is(h1, h2, h3) { font-weight: 700; }              /* 提优先级 */
:where(h1, h2, h3) { margin: 0; }                   /* 优先级 0，易覆盖 */

/* :has() 父/关系选择器 */
article:has(img)            { padding: 20px; }       /* 含图片的文章 */
.form-group:has(input:invalid) label { color: #dc3545; } /* 校验失败标红 label */
figure:has(figcaption)      { border: 1px solid #eee; }

/* ::before / ::after */
.card::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background-color: #007bff;
}
.button::after { content: ' →'; margin-left: 5px; }

/* 用 ::before 做角标 */
.badge-new { position: relative; }
.badge-new::before {
  content: 'NEW';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 10px;
  padding: 2px 6px;
  background: #dc3545;
  color: #fff;
  border-radius: 10px;
}

/* 首字下沉 */
.article p::first-letter {
  font-size: 2rem;
  font-weight: 700;
  float: left;
  margin-right: 10px;
}
.article p::first-line { font-weight: 600; color: #333; }

/* 选中文本样式 */
::selection { background-color: #007bff; color: white; }

/* 占位符 */
input::placeholder { color: #999; font-style: italic; }

/* 列表标记 */
li::marker { color: #007bff; font-weight: 700; }

/* 优先级：100（ID） */
#header { color: red; }

/* 优先级：20（两个类） */
.nav .item { color: blue; }

/* 优先级：112（一个 ID + 一个类 + 两个元素） */
div#nav .item a { color: green; }

/* 相同优先级：后定义者生效 */
.button { background-color: #007bff; }
.button { background-color: #0056b3; }  /* 最终是这个 */

/* !important 覆盖普通声明（应尽量避免） */
.button { background-color: #dc3545 !important; }

/* :where() 优先级为 0，方便被主题覆盖 */
:where(.reset) ul { margin: 0; padding: 0; }

/* 无论选择器谁更"重"，靠后声明的 layer 整体优先级更高 */
@layer reset, base, components, utilities;

@layer components {
  .btn { background: #007bff; color: #fff; }
}
@layer utilities {
  .bg-red { background: #dc3545; } /* utilities 在后，覆盖 components */
}

/* 完整对照：不同匹配模式 */
[type]                 { }  /* 有 type 属性 */
[type="checkbox"]      { }  /* 精确等于 */
[class~="btn"]         { }  /* 空格分隔列表里含 btn（等价于 .btn） */
[lang|="zh"]           { }  /* 等于 zh 或以 zh- 开头，如 zh-CN */
[href^="mailto:"]      { }  /* 以 mailto: 开头 */
[href$=".zip"]         { }  /* 以 .zip 结尾 */
[href*="github"]       { }  /* 含 github */
[data-size="lg" i]     { }  /* i：忽略大小写，匹配 LG/Lg/lg */

/* 用 data-* 表达组件状态，样式与状态一一对应 */
.dialog[data-open="true"]     { display: block; }
.dialog[data-open="false"]    { display: none; }
.tab[aria-selected="true"]    { border-bottom: 2px solid #007bff; }
.btn[aria-busy="true"]        { pointer-events: none; opacity: 0.6; }
.row[data-status="error"]     { background: #fff5f5; }

/* 给外链、下载、不同文件类型自动加图标 */
a[target="_blank"]::after { content: ' ↗'; font-size: 0.8em; }
a[download]::before       { content: '⬇ '; }
a[href$=".pdf"]::after    { content: ' (PDF)'; color: #dc3545; }

/* 基础 */
li:nth-child(odd)   { }  /* 1,3,5... 奇数 */
li:nth-child(even)  { }  /* 2,4,6... 偶数 */
li:nth-child(3)     { }  /* 第 3 个 */

/* An+B 表达式 */
li:nth-child(3n)    { }  /* 3,6,9... 每三个的最后一个 */
li:nth-child(3n+1)  { }  /* 1,4,7... 每三个的第一个（每行首列） */
li:nth-child(n+4)   { }  /* 第 4 个及以后（"超过 3 个就折叠"） */
li:nth-child(-n+3)  { }  /* 前 3 个（"只显示前三"） */

/* 组合出"区间"：第 3 到第 6 个 */
li:nth-child(n+3):nth-child(-n+6) { background: #f0f8ff; }

/* 从后往前数 */
li:nth-last-child(2)          { }  /* 倒数第 2 个 */
li:nth-last-child(-n+2)       { }  /* 最后两个 */

/* 结合 :only-child / :first-of-type 做边界处理 */
.tag:first-child { margin-left: 0; }
.tag:last-child  { margin-right: 0; }

.list:not(.expanded) > li:nth-child(n+6) { display: none; }
.list.expanded > li { display: list-item; }

/* 慢：关键选择器是标签 a，浏览器要先找页面上所有 a，再往上回溯 */
header nav ul li a { }

/* 快：关键选择器是一个类，候选集立刻缩小 */
.nav-link { }

/* Block */
.card { }
/* Element */
.card__title { }
.card__body  { }
/* Modifier */
.card--featured { }
.card__title--large { }

/* 焦点样式优先用 :focus-visible，鼠标点击不显示、键盘导航才显示 */
.btn:focus-visible { outline: 3px solid #0056b3; outline-offset: 2px; }

/* 用 ARIA 状态驱动样式，保证视觉与语义一致 */
[aria-current="page"]      { font-weight: 700; }
[aria-expanded="true"] .caret { transform: rotate(180deg); }
[aria-disabled="true"]     { opacity: 0.5; cursor: not-allowed; }
[aria-invalid="true"]      { border-color: #dc3545; }

/* 视觉隐藏但保留给读屏（无障碍常用工具类） */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* 卡片内有 <video> 时改用横向布局 */
.card:has(video) { display: grid; grid-template-columns: 200px 1fr; }

/* 选中某单选框时高亮它所在的整个 option 行 */
.option:has(input:checked) { border-color: #007bff; background: #f0f8ff; }

/* 表单任一字段无效时，禁用提交按钮所在的工具条 */
form:has(:invalid) .submit-bar { opacity: 0.5; }

/* 数量选择：列表为空时显示占位提示（配合 :empty） */
.list:has(li) + .empty-hint { display: none; }

/* 前一个兄弟被 hover 时，当前元素做出反应 */
.menu-item:has(+ .menu-item:hover) { opacity: 0.6; }

/* 浏览器视角：先找所有 <a>（关键选择器），再逐个往上确认它在
   .list 里、.list 又在 #nav 里 —— 候选集大，验证多 */
#nav .list a { }

/* 关键选择器是类，候选集立刻缩小到 .nav-link，几乎不用回溯 */
.nav-link { }

/* 慢：关键选择器 * */
.container * { box-sizing: border-box; }

/* 慢：关键选择器是标签，且链很长 */
body div.wrapper ul li span { }

/* 快：关键选择器是单类 */
.box-border { box-sizing: border-box; }

/* 完整匹配模式对照 */
[disabled]              { }  /* 存在该属性 */
[type="email"]          { }  /* 精确等于 */
[class~="btn"]          { }  /* 空格列表含 btn，等价 .btn */
[lang|="en"]            { }  /* 等于 en 或 en- 开头（en-US、en-GB） */
[href^="https://"]      { }  /* 以...开头 */
[src$=".webp"]          { }  /* 以...结尾 */
[title*="警告"]         { }  /* 包含子串 */
[data-role="admin" i]   { }  /* i：忽略大小写 */
[data-role="admin" s]   { }  /* s：强制区分大小写 */

/* 用 data-* 做组件状态机：状态与样式一一对应 */
.accordion[data-state="open"]   .panel { display: block; }
.accordion[data-state="closed"] .panel { display: none; }
.toast[data-type="success"]     { border-color: #22c55e; }
.toast[data-type="error"]       { border-color: #ef4444; }
.btn[data-loading]              { pointer-events: none; opacity: 0.6; }
.step[data-status="done"]::before   { content: "✓"; color: #22c55e; }
.step[data-status="active"]::before { content: "●"; color: #3b82f6; }

/* ARIA 属性驱动样式，保证视觉与语义同步 */
[aria-expanded="true"] .chevron { transform: rotate(180deg); }
[aria-selected="true"]          { background: #eff6ff; }
[aria-current="page"]           { font-weight: 700; }
[aria-busy="true"]              { cursor: progress; }
[aria-hidden="true"]            { display: none; }

/* 属性值提取到内容：打印时展开链接地址 */
@media print {
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* child 系：在所有兄弟中数位置 */
li:first-child        { }  /* 第一个子元素（必须是第一个兄弟） */
li:last-child         { }  /* 最后一个 */
li:only-child         { }  /* 唯一子元素 */
li:nth-child(3)       { }  /* 第 3 个兄弟 */
li:nth-last-child(2)  { }  /* 倒数第 2 个 */

/* of-type 系：在同标签兄弟中数位置 */
p:first-of-type       { }  /* 第一个 <p>（前面可以有别的标签） */
p:last-of-type        { }  /* 最后一个 <p> */
p:only-of-type        { }  /* 同级中唯一的 <p> */
p:nth-of-type(2)      { }  /* 第 2 个 <p> */
p:nth-last-of-type(1) { }  /* 倒数第 1 个 <p> */

/* 其他结构伪类 */
:empty                { }  /* 无子节点（含文本）的元素 */
:root                 { }  /* 文档根，通常是 <html>，特异性等于一个类 */

<div>
  <h2>标题</h2>   <!-- 第 1 个子元素，但是第 1 个 h2 -->
  <p>段落一</p>   <!-- 第 2 个子元素，但是第 1 个 p -->
  <p>段落二</p>   <!-- 第 3 个子元素，第 2 个 p -->
</div>

p:first-child   { }  /* 不命中！第一个子元素是 h2，不是 p */
p:first-of-type { }  /* 命中"段落一"：它是第一个 p */

/* 基础 */
:nth-child(odd)    /* 奇数 1,3,5... */
:nth-child(even)   /* 偶数 2,4,6... */
:nth-child(3)      /* 恰好第 3 个 */

/* An 步长 */
:nth-child(3n)     /* 3,6,9...（每 3 个的最后一个） */
:nth-child(4n)     /* 4,8,12... */

/* An+B 偏移 */
:nth-child(3n+1)   /* 1,4,7...（每 3 个的第一个 = 网格每行首列） */
:nth-child(2n+1)   /* 等价 odd */
:nth-child(5n-1)   /* 4,9,14... */

/* 边界选择 */
:nth-child(n+4)    /* 第 4 个及以后（"超过 3 个的部分"） */
:nth-child(-n+3)   /* 前 3 个 */
:nth-child(n+2):nth-child(-n+5)  /* 交集：第 2 到第 5 个 */

/* of S 语法：先过滤再计数 */
:nth-child(even of .visible)  /* 只在 .visible 里数偶数 */
:nth-child(-n+3 of li.tag)    /* 前 3 个 li.tag */

/* 需求：网格每行 3 列，给每行首列去掉左边距 */
.grid-item:nth-child(3n+1) { margin-left: 0; }

/* 需求：列表超过 5 条折叠，配合 checkbox 展开 */
.list:not(:has(.toggle:checked)) > li:nth-child(n+6) { display: none; }

/* 需求：前 3 名奖牌配色 */
.rank:nth-child(1) { color: gold; }
.rank:nth-child(2) { color: silver; }
.rank:nth-child(3) { color: #cd7f32; }

/* 需求：斑马纹只算可见行（隐藏行不打乱） */
tr:nth-child(even of :not([hidden])) { background: #f8f9fa; }

/* 单参数 */
.btn:not(.disabled) { cursor: pointer; }

/* 选择器列表：任一匹配即排除 */
input:not([type="hidden"], [disabled], [readonly]) {
  border: 1px solid #ddd;
}

/* 组合链 */
li:not(:first-child):not(:last-child) { }  /* 中间的项 */
li:not(:first-child) { border-top: 1px solid #eee; }  /* 除首项外都加上边框 */

/* 与其他伪类组合 */
.card:not(:has(img)) { padding: 12px; }    /* 无图卡片紧凑 */
a:not([href]) { color: inherit; cursor: default; }  /* 无 href 的锚点 */

:not(.a)      /* 特异性 = 一个类（0,1,0） */
:not(#id)     /* 特异性 = 一个 ID（1,0,0）—— 意外拔高！ */
:not(.a, #id) /* 取列表最高 = ID（1,0,0） */

/* :where() 内部恒为 0，用它包住排除条件不拔高特异性 */
a:where(:not(.btn)) { text-decoration: underline; }

/* :is() 简化并列，特异性 = 参数中最高者 */
:is(h1, h2, h3) a { color: var(--color-primary); }
/* 等价于展开三条，但特异性按 h_ + a 计算 */

/* :where() 简化并列，特异性 = 0，极易被覆盖 */
:where(h1, h2, h3) { margin-block: 0; }
/* 适合写"默认值/重置"，业务样式无需提高特异性就能盖过 */

/* 对比：同样的分组，特异性天差地别 */
:is(.a, .b, #c) .target { }    /* 特异性含 ID = (1,0,1) */
:where(.a, .b, #c) .target { } /* 特异性 = (0,0,1)，忽略内部 */

/* 一个可被轻松覆盖的重置层 */
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; cursor: pointer; }
/* 业务侧：.nav a { color: blue; } 一个类就能盖过上面的 :where(a) */

/* 校验状态 */
input:valid            { }  /* 满足约束 */
input:invalid          { }  /* 不满足（但页面一加载空必填就红，体验差） */
input:user-valid       { }  /* 用户交互后才判定为有效（推荐） */
input:user-invalid     { }  /* 用户交互后才判定为无效（推荐） */
input:required         { }  /* 必填 */
input:optional         { }  /* 选填 */
input:in-range         { }  /* 数值在 min/max 内 */
input:out-of-range     { }  /* 超范围 */

/* 交互与内容状态 */
input:placeholder-shown{ }  /* 正显示占位符（即为空） */
input:autofill         { }  /* 浏览器自动填充 */
input:read-only        { }  /* 只读 */
input:checked          { }  /* 勾选 */
input:indeterminate    { }  /* 半选（如全选框的中间态） */
input:default          { }  /* 默认选中项 */

/* 组合出浮动标签：占位符隐藏（有内容）或聚焦时，label 上浮 */
.field { position: relative; }
.field label {
  position: absolute; left: 12px; top: 12px;
  transition: all 0.15s; pointer-events: none;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: -8px; font-size: 0.75rem; color: var(--color-primary);
}

/* 用 :user-invalid 做友好校验：用户动过才标红 */
input:user-invalid {
  border-color: #dc3545;
}
input:user-invalid + .error-hint { display: block; }

/* 自定义复选框（用 :checked 驱动） */
.checkbox input:checked + .box { background: var(--color-primary); }
.checkbox input:checked + .box::after { content: "✓"; color: #fff; }

/* 生成内容 */
.tag::before { content: "#"; opacity: 0.5; }
.tag::after  { content: ""; }

/* 首字下沉与首行 */
.article p::first-letter { font-size: 3rem; float: left; line-height: 1; }
.article p::first-line   { font-variant: small-caps; }

/* 选中文本高亮 */
::selection { background: var(--color-primary); color: #fff; }

/* 占位符 */
input::placeholder { color: #9ca3af; }

/* 列表标记 */
li::marker { color: var(--color-primary); font-weight: 700; }

/* 文件上传按钮 */
input[type="file"]::file-selector-button {
  padding: 6px 12px; border-radius: 6px;
  background: var(--color-primary); color: #fff; border: none;
}

/* 对话框/弹窗遮罩 */
dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }

/* 详情组件展开内容（新） */
details::details-content { transition: opacity 0.3s; }

/* 拼写/语法错误（新） */
::spelling-error { text-decoration: red wavy underline; }
::grammar-error  { text-decoration: green wavy underline; }

/* 高亮定位：URL 里 #:~:text= 命中的文本 */
::target-text { background: #fef08a; }

/* 逐个拆解 */
*                         /* (0,0,0) */
li                        /* (0,0,1) */
li::before                /* (0,0,2) 元素 + 伪元素 */
.list                     /* (0,1,0) */
.list li                  /* (0,1,1) */
.list li.active           /* (0,2,1) */
a[href]                   /* (0,1,1) 元素 + 属性 */
#nav                      /* (1,0,0) */
#nav .list li a           /* (1,1,2) */
:is(#nav, .side) a        /* (1,0,1) :is 取最高 = ID */
:where(#nav) a            /* (0,0,1) :where 恒 0 */
:not(.a, #b)              /* (1,0,0) :not 取内部最高 = ID */

/* A */ #main .card .title { color: red; }    /* (1,2,0) */
/* B */ .card h2.title.big  { color: blue; }   /* (0,3,1) */
/* 答案：A 生效。第一位 1 > 0，直接判定，后面的位不用比。
   即使 B 有更多类，也敌不过一个 ID。 */

/* C */ .btn.primary        { background: green; }  /* (0,2,0) */
/* D */ .btn[data-variant]   { background: teal; }   /* (0,2,0) */
/* 答案：C 与 D 特异性相等 (0,2,0)，此时看源码顺序，后写的 D 生效。 */

/* 声明层顺序：越靠后优先级越高，与特异性无关 */
@layer reset, base, components, utilities;

@layer components {
  /* 即使这里用了高特异性 */
  #app .card .title.big { color: black; }   /* (1,3,0) */
}
@layer utilities {
  /* 这个低特异性的类照样赢，因为 utilities 层更靠后 */
  .text-red { color: red; }                 /* (0,1,0) */
}
/* 结果：.text-red 生效。层序 > 特异性。 */

/* 键盘聚焦才显示焦点环，鼠标点击不显示 */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* 但绝不要 :focus { outline: none } 一刀切，会害了键盘用户 */

/* 焦点在容器内任意后代时高亮容器 */
.card:focus-within { box-shadow: 0 0 0 2px var(--color-focus); }

/* ARIA 驱动状态样式 */
[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
[aria-invalid="true"]  { border-color: #dc3545; }
[aria-pressed="true"]  { background: var(--color-primary); color: #fff; }

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 视觉隐藏但保留给读屏 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.tabs input[type="radio"] { display: none; }
.tabs input:nth-of-type(1):checked ~ .panels .panel:nth-child(1),
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2) {
  display: block;
}
.tabs .panel { display: none; }

details > summary { list-style: none; cursor: pointer; }
details > summary::before { content: "▶"; display: inline-block; transition: 0.2s; }
details[open] > summary::before { transform: rotate(90deg); }

/* 悬停某行时整行加深 */
tbody tr:hover { background: #f0f8ff; }
/* 表格容器在有选中行时显示批量操作条 */
.table-wrap:has(tbody input:checked) .bulk-bar { display: flex; }

[lang|="ar"] { direction: rtl; font-family: "Noto Naskh Arabic", serif; }
[lang|="zh"] { font-family: "Noto Sans SC", sans-serif; letter-spacing: 0.02em; }

/* 后代（空格）：任意层级后代 */
.article a { color: var(--color-primary); }

/* 子（>）：仅直接子级，不穿透更深 */
.menu > li { border-bottom: 1px solid #eee; }
/* 只给一级菜单项加线，子菜单的 li 不受影响 */

/* 相邻兄弟（+）：紧接其后的那一个 */
h2 + p { margin-top: 0; }            /* 标题后第一段贴紧标题 */
.form-error + input { border-color: red; }

/* 通用兄弟（~）：其后所有同级兄弟 */
h2 ~ p { color: #555; }              /* 标题之后的所有段落 */
input:checked ~ label { font-weight: 700; }

/* 给垂直排列的子元素之间统一加间距，首元素不加 */
.flow > * + * { margin-block-start: 1rem; }
/* 相比给每个元素加 margin-bottom 再清最后一个，这个更优雅 */

/* 手风琴：展开项的下一个标题拉开距离 */
.item[data-open] + .item { margin-top: 8px; }

/* 表单：某选项选中后显示紧邻的补充输入 */
input[value="other"]:checked ~ .other-input { display: block; }

/* :target —— URL 锚点命中的元素（纯 CSS 路由/弹窗） */
#modal:target { display: block; }
.section:target { animation: highlight 1s; }

/* :modal —— 通过 showModal() 打开的 dialog */
dialog:modal { max-width: 500px; }

/* :popover-open —— 打开状态的 popover */
[popover]:popover-open { animation: pop-in 0.2s; }

/* :fullscreen —— 全屏元素 */
video:fullscreen { object-fit: contain; }

/* :defined —— 已注册的自定义元素（避免 FOUC） */
my-widget:not(:defined) { visibility: hidden; }

/* :dir() —— 按书写方向选择 */
:dir(rtl) .arrow { transform: scaleX(-1); }

/* :lang() —— 按语言选择（比属性选择器更懂继承） */
:lang(zh) { line-height: 1.8; }
:lang(ja) q { quotes: "「" "」"; }

/* :playing / :paused —— 媒体播放状态（新） */
video:paused { filter: grayscale(0.3); }

// querySelector / querySelectorAll —— 同 CSS 选择器语法
const firstBtn = document.querySelector('.toolbar > .btn:first-child');
const invalids = document.querySelectorAll('input:invalid');

// matches —— 判断元素是否匹配某选择器（事件委托常用）
document.addEventListener('click', (e) => {
  if (e.target.matches('.btn, .btn *')) {
    handleButtonClick(e);
  }
});

// closest —— 向上找最近的匹配祖先（比手写 parentNode 循环干净）
const row = e.target.closest('tr[data-id]');
const id = row?.dataset.id;

// 属性/结构选择器在 JS 里同样有效
const openPanels = document.querySelectorAll('[data-state="open"]');
const evenRows = document.querySelectorAll('tbody tr:nth-child(even)');

.card {
  padding: 16px;

  /* & 拼接伪类 */
  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

  /* & 引用父级，写"父级在后"的关系 */
  .theme-dark & { background: #1e293b; }

  /* 嵌套后代 */
  & .title { font-weight: 700; }

  /* 嵌套 :has */
  &:has(img) { padding-block: 24px; }

  /* 嵌套媒体查询 */
  @media (min-width: 768px) { padding: 24px; }

  /* 嵌套 :is 列表 */
  & :is(h1, h2, h3) { margin: 0; }
}

/* 技巧 1：outline 大法 —— 给可疑选择器加醒目轮廓，确认命中范围 */
.debug-target { outline: 2px solid magenta !important; }

/* 技巧 2：给所有元素描边，排查布局（不占空间，不用 border） */
* { outline: 1px solid rgba(255,0,0,0.2); }

/* 技巧 3：用属性存在选择器找出漏标的元素 */
img:not([alt]) { outline: 3px solid red; }        /* 缺 alt 的图 */
a:not([href]) { outline: 3px solid orange; }      /* 无 href 的链接 */
[style] { outline: 2px dashed purple; }           /* 有内联样式的（应消除） */

// 在控制台快速统计某选择器命中数量
console.log(document.querySelectorAll('.card:has(img)').length);

// 找出所有用了 !important 的元素（结合 DevTools）
// 或用 getComputedStyle 验证最终生效值
const el = document.querySelector('.btn');
console.log(getComputedStyle(el).backgroundColor);

<div class="a b">同时有 a 和 b —— .a.b 命中</div>
<div class="a"><div class="b">.a 里的 .b —— .a .b 命中</div></div>

/* 1. 根据后代存在性 */
.card:has(img)                { }  /* 含图 */
.card:not(:has(img))          { }  /* 无图 */
figure:has(figcaption)        { }  /* 有说明文字 */

/* 2. 根据后代状态 */
label:has(input:checked)      { }  /* 关联输入被选中 */
form:has(:invalid)            { }  /* 表单有无效项 */
tr:has(:checked)              { }  /* 行内有勾选 */

/* 3. 根据数量（配合 nth） */
.grid:has(> :nth-child(4))    { }  /* 至少 4 个子项 */
.list:has(> :only-child)      { }  /* 恰好 1 个 */

/* 4. 兄弟关系 */
h2:has(+ p)                   { }  /* 后面紧跟段落的标题 */
.item:has(~ .item:hover)      { }  /* 后面有兄弟被 hover */

/* 5. 全局态（挂在 body/html 上） */
body:has(dialog[open])        { overflow: hidden; }
html:has(#dark-toggle:checked){ color-scheme: dark; }

/* 6. 组合复杂条件 */
.product:has(.badge--sale):has(img) { }  /* 既打折又有图 */

// 特性检测，不支持时用 JS 加 class 模拟
if (!CSS.supports('selector(:has(*))')) {
  document.querySelectorAll('.card').forEach((c) => {
    if (c.querySelector('img')) c.classList.add('has-image');
  });
}

.modal { display: none; }
.modal:target { display: flex; }              /* URL #modal 时显示 */
.modal:target .backdrop { /* 点击链接指向 # 即可关闭 */ }

.wizard:has(#step1:valid) .progress { --step: 1; }
.wizard:has(#step2:valid) .progress { --step: 2; }
.progress::before { width: calc(var(--step) * 33.3%); }

.list:empty + .empty-state { display: block; }
.list:not(:empty) + .empty-state { display: none; }

/* 结构：单类为主，特异性统一在 (0,1,0) */
.card {
  --pad: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--pad);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}

/* 交互态：伪类而非 JS 加类 */
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
.card:focus-within { outline: 2px solid var(--color-primary); }

/* 条件布局：:has 根据内容自适应 */
.card:has(.card__media) { padding-top: 0; }
.card:not(:has(.card__media)) { --pad: 20px; }

/* 结构伪类：首尾元素特殊处理 */
.card__body > p:first-of-type { margin-top: 0; }
.card__body > p:last-child { margin-bottom: 0; }

/* 状态：data 属性驱动 */
.card[data-featured] { border-color: var(--color-primary); }
.card[data-featured] .card__title::after { content: " ★"; color: gold; }
.card[data-loading] { opacity: 0.6; pointer-events: none; }

/* 数量自适应：标签超过 3 个时折叠多余的 */
.card__tags:has(> :nth-child(4)) > :nth-child(n+4) { display: none; }
.card__tags:has(> :nth-child(4))::after { content: "…"; }

/* 变体：BEM modifier */
.card--compact { --pad: 8px; gap: 6px; }
.card--horizontal { flex-direction: row; }

// stylelint 强制：最大特异性、禁 ID、限嵌套深度、BEM 命名
module.exports = {
  rules: {
    'selector-max-specificity': '0,3,0',
    'selector-max-id': 0,
    'selector-max-compound-selectors': 3,
    'selector-class-pattern':
      '^[a-z]([a-z0-9-]+)?(__([a-z0-9-]+))?(--([a-z0-9-]+))?$',
    'no-descending-specificity': true,   // 防止低特异性写在高特异性后面失效
  },
};

/* 逐一计算特异性 */
ul li a                    /* (0,0,3) 三个元素 */
.nav > li > a              /* (0,1,2) 一个类 + 两个元素 */
a.active:hover             /* (0,2,1) 两个类(含伪类) + 一个元素 */
input[type="text"]:focus   /* (0,2,1) 属性 + 伪类 + 元素 */
#main ul.list li:first-child /* (1,2,2) 一 ID + 两类 + 两元素 */
:is(.a, .b) :where(#x) .c  /* (0,2,0) :is 取 .a/.b 一个类, :where 归 0, .c 一个类 */
::before                   /* (0,0,1) 伪元素算元素 */
*, :where(*)               /* (0,0,0) 通用与 :where 都是 0 */

/* 页面上一个 <a class="link active" href="#"> 同时被下列命中 */
/* R1 */ a { color: black; }                    /* (0,0,1) */
/* R2 */ .link { color: gray; }                 /* (0,1,0) */
/* R3 */ .link.active { color: blue; }           /* (0,2,0) */
/* R4 */ a.active:hover { color: red; }          /* (0,2,1) 仅 hover 时 */
/* 静止时：R3 生效（蓝色），(0,2,0) 最高。
   悬停时：R4 生效（红色），(0,2,1) > (0,2,0)。 */

/* 用 attr() 把属性值渲染成内容（提示、计数） */
[data-count]::after { content: " (" attr(data-count) ")"; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  /* ...气泡样式 */
}

/* 根据外链类型自动加图标 */
a[href^="mailto:"]::before { content: "✉ "; }
a[href^="tel:"]::before    { content: "☎ "; }
a[href$=".pdf"]::after     { content: " [PDF]"; color: #dc3545; }
a[target="_blank"]::after  { content: " ↗"; }

/* 表单必填标记 */
label:has(+ input:required)::after,
input:required + label::after { content: " *"; color: #dc3545; }

/* 多值属性匹配（class 是空格列表） */
[class~="urgent"] { border-left: 3px solid red; }  /* 等价 .urgent */

/* 在选择器命中的作用域内重定义变量，子树整体响应 */
.theme-accent {
  --color-primary: #7c3aed;   /* 该子树内主色变紫 */
}
.theme-accent .btn { background: var(--color-primary); }

/* 用状态伪类切换变量值 */
.card { --lift: 0; transition: transform 0.2s; transform: translateY(var(--lift)); }
.card:hover { --lift: -4px; }

/* 用属性选择器切换整套令牌（多尺寸组件） */
.btn[data-size="sm"] { --btn-pad: 4px 8px; --btn-font: 12px; }
.btn[data-size="md"] { --btn-pad: 8px 16px; --btn-font: 14px; }
.btn[data-size="lg"] { --btn-pad: 12px 24px; --btn-font: 16px; }
.btn { padding: var(--btn-pad); font-size: var(--btn-font); }

/* :lang() 懂继承：即使子元素没标 lang，也能从祖先继承判定 */
:lang(zh) { font-family: "Noto Sans SC", sans-serif; }
:lang(ja) { font-family: "Noto Sans JP", sans-serif; }
:lang(ar) { font-family: "Noto Naskh Arabic", serif; direction: rtl; }

/* :dir() 按书写方向翻转图标 */
:dir(rtl) .icon-arrow { transform: scaleX(-1); }

/* 不同语言的引号样式 */
:lang(zh) q { quotes: "“" "”"; }
:lang(fr) q { quotes: "« " " »"; }

/* 逻辑属性配合，天然适配 RTL（配合选择器命中） */
.card { padding-inline-start: 16px; }  /* LTR 左内边距，RTL 自动右 */

/* 误区 1：想选第一段却用 :first-child（前面有标题就失效） */
p:first-child   { }   /* ✗ 常常不命中 */
p:first-of-type { }   /* ✓ */

/* 误区 2：.a .b 与 .a.b 混淆 */
.btn .icon { }   /* .btn 后代里的 .icon */
.btn.icon  { }   /* 同时有 .btn 和 .icon */

/* 误区 3：:not() 里放 ID 意外拔高特异性 */
div:not(#x) { }  /* 特异性含 ID = (1,0,1) */

/* 误区 4：忘记 content，伪元素不生成 */
.badge::after { }               /* ✗ 无 content 不显示 */
.badge::after { content: ""; }  /* ✓ */

/* 误区 5：:hover 写在 :visited 前被覆盖（LVHA） */

/* 误区 6：用 * 做关键选择器，性能与可读性双输 */
.container * { }   /* ✗ 宽泛 */
.container > .item { }  /* ✓ 关键选择器更具体 */

/* 误区 7：:empty 对含空格/换行的元素不生效（那算有文本节点） */
p:empty { display: none; }   /* <p> </p> 里有空格就不命中 */

/* 误区 8：属性值大小写敏感，需要时加 i 标志 */
[data-x="ADMIN"]   { }   /* 精确匹配，区分大小写 */
[data-x="admin" i] { }   /* 忽略大小写 */