CSS 选择器一次讲明白：匹配规则、伪类与优先级

.card.featured > h2 {
  color: #0066ff;
}

* { box-sizing: border-box; }        /* 通配：所有元素，特异性为 0 */
p  { line-height: 1.8; }             /* 类型选择器 */
.card { padding: 16px; }             /* 类选择器 */
#toc { position: sticky; }           /* ID 选择器 */

h1, h2, .title { font-weight: 700; } /* 选择器列表：并集 */
.card.featured { border-color: #0066ff; }  /* 复合：同时有两类，中间不能有空格 */
button.primary.large { min-width: 96px; }  /* 三个条件同时成立 */

<article class="post">
  <h2>标题</h2>
  <p>第一段</p>
  <section>
    <p>嵌套段落</p>
  </section>
  <p>最后一段</p>
</article>

input[required] { border-left: 3px solid #ee0a24; }
a[href^="https"]::after { content: " ↗"; }
a[href$=".pdf"]::before { content: "📄 "; }
img[alt=""] { outline: 2px dashed #f59e0b; }  /* 找出漏写 alt 的图 */
[lang|="zh"] { font-family: "PingFang SC", sans-serif; }
a[href*="5dphp" i] { color: #0066ff; }

/* 用户行为 */
.btn:hover { background: #0066ff; }
.btn:focus-visible { outline: 2px solid #00d4ff; }  /* 键盘聚焦才显示 */
.btn:active { transform: translateY(1px); }

/* 表单状态 */
input:checked + label { font-weight: 700; }
input:disabled { opacity: .5; }
input:placeholder-shown { border-color: #c9c9c9; }
input:invalid { border-color: #ee0a24; }

/* 树结构 */
li:first-child { margin-top: 0; }
li:last-child { border-bottom: 0; }
p:empty { display: none; }         /* 连空白字符都不能有 */
.card:only-child { width: 100%; }

/* 按位置匹配 */
tr:nth-child(odd) { background: #f7f9fc; }
li:nth-child(-n+3) { color: #0066ff; }   /* 前三项 */

/* :is() 把冗长的并集压成一行，参数取「最具体」的特异性 */
:is(section, article, aside, nav) h1 { font-size: 1.5rem; }

/* :where() 同样压缩写法，但特异性恒为 0，方便被覆盖 */
:where(.theme-dark, .theme-light) .btn { border-radius: 8px; }

/* :not() 排除；可传选择器列表 */
.btn:not(.primary, :disabled) { background: transparent; }

/* :has() 按「内部/后面有什么」反向筛元素 —— 父选择器与前置兄弟 */
.card:has(img) { padding: 0; }              /* 含图片的卡片 */
.card:has(> .tag.featured) { border: 1px solid #0066ff; }  /* 直接子级 */
.field:has(input:invalid) { color: #ee0a24; }              /* 表单整体标红 */
h2:has(+ h3) { margin-bottom: 4px; }        /* 后面紧跟 h3 的标题 */

.required::after { content: " *"; color: #ee0a24; }
li::marker { color: #7c3aed; }
p::first-line { font-weight: 600; }
input::placeholder { color: #969799; }
::selection { background: #00d4ff; color: #0d1117; }

#app .list li.active { color: red; }        /* 1-2-1 */
.list li.active[data-id] { color: blue; }   /* 0-3-1 → 红胜：ID 列先比 */
:is(#app, .list) li { color: green; }       /* 1-0-1（取参数中最具体的 #app） */
:where(#app, .list) li { color: gray; }     /* 0-0-1（:where 恒为 0） */
.card:not(.disabled) { color: purple; }     /* 0-2-0（:not 取参数权重） */

<ul class="cards">
  <li class="card"><h3>基础篇</h3><p>内容</p></li>
  <li class="card"><img src="cover.jpg" alt="封面"><h3>带图卡片</h3></li>
  <li class="card featured"><h3>推荐</h3></li>
  <li class="card"></li>
</ul>

/* 基础层：用 :where 保持 0 优先级，方便业务覆盖 */
:where(.cards) { margin: 0; padding: 0; list-style: none; }

.cards .card {
  padding: 16px;
  border-bottom: 1px solid #ebedf0;
}
.cards .card:nth-child(odd) { background: #f7f9fc; }  /* 斑马纹 */
.cards .card:last-child { border-bottom: 0; }
.cards .card:hover { background: #eef5ff; }

/* 复合条件：既是推荐、又在首位 */
.cards .card.featured:first-child { border-left: 3px solid #0066ff; }

/* 含图片的卡片去掉内边距，图片铺满 */
.cards .card:has(> img) { padding: 0; }
.cards .card:has(> img) img { display: block; width: 100%; }

/* 空卡片：不出错，也不占位 */
.cards .card:empty { display: none; }

/* 没有标题的卡片给出兜底提示 */
.cards .card:not(:has(h3))::before {
  content: "暂无标题";
  color: #969799;
}

/* 键盘聚焦时给整张卡片加轮廓 */
.cards .card:has(:focus-visible) { outline: 2px solid #00d4ff; }

.avatar--muted { filter: grayscale(1); }
.banner img { filter: brightness(.8) contrast(1.1); }
.icon { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }  /* 沿图形轮廓投影，不支持 inset / spread */

/* backdrop-filter 处理的是元素「背后」的区域，常用于毛玻璃 */
.glass {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(12px) saturate(1.4);
}