现代选择器

/* 传统写法 */
header a,
nav a,
footer a {
  color: #3b82f6;
}

/* 使用 :is() */
:is(header, nav, footer) a {
  color: #3b82f6;
}

/* 传统写法 */
article h1,
article h2,
article h3,
section h1,
section h2,
section h3 {
  line-height: 1.2;
}

/* 使用 :is() */
:is(article, section) :is(h1, h2, h3) {
  line-height: 1.2;
}

:is(#id, .class, p) {
  /* 优先级等于 #id，即 1-0-0 */
}

:is(.foo, .bar) {
  /* 优先级等于 0-1-0 */
}

/* 如果 :unknown 无效，整条规则仍然有效 */
:is(.valid, :unknown, .another-valid) {
  color: blue;
}

/* 优先级：0-0-0 */
:where(#id, .class, p) {
  color: gray;
}

/* 可以被任何选择器覆盖 */
p {
  color: red; /* 这个会生效！ */
}

/* 组件库的默认样式 */
:where(.button) {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: #e5e7eb;
}

/* 用户可以轻松覆盖 */
.button {
  background: #3b82f6;
}

/* 零优先级的 reset，用户样式可以轻松覆盖 */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: normal;
}

:where(ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 正常优先级 1-0-1 */
#sidebar a {
  color: blue;
}

/* 优先级降为 0-0-1 */
:where(#sidebar) a {
  color: blue;
}

/* 包含 img 的 a 元素 */
a:has(img) {
  display: block;
}

/* 包含必填输入框的表单组 */
.form-group:has(input:required) {
  font-weight: bold;
}

/* 如果卡片包含图片，卡片就应用样式 */
.card:has(img) {
  padding: 0;
}

/* 如果表单有无效输入，整个表单边框变红 */
form:has(input:invalid) {
  border-color: #ef4444;
}

/* 如果后面紧跟 p，则 h2 添加样式 */
h2:has(+ p) {
  margin-bottom: 0.5rem;
}

/* 如果后面有 .error，则输入框变红 */
input:has(~ .error) {
  border-color: #ef4444;
}

/* 没有子元素的容器 */
.container:not(:has(*)) {
  display: none;
}

/* 或者显示空状态提示 */
.list:not(:has(li))::before {
  content: '暂无数据';
  display: block;
  padding: 2rem;
  text-align: center;
  color: #9ca3af;
}

/* 包含无效输入的表单组 */
.form-group:has(input:invalid:not(:placeholder-shown)) {
  --input-border-color: #ef4444;
}

.form-group:has(input:valid:not(:placeholder-shown)) {
  --input-border-color: #10b981;
}

.form-group input {
  border-color: var(--input-border-color, #d1d5db);
}

/* 如果卡片有图片，使用水平布局 */
.card:has(img) {
  display: flex;
  gap: 1rem;
}

.card:has(img) img {
  flex: 0 0 200px;
  object-fit: cover;
}

/* 没有图片则垂直堆叠 */
.card:not(:has(img)) {
  display: block;
}

/* 如果页面有模态框打开，禁止滚动 */
body:has(.modal.open) {
  overflow: hidden;
}

/* 如果侧边栏展开，调整主内容区 */
.main:has(.sidebar.expanded) {
  margin-left: 250px;
}

/* 除了最后一个 */
li:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

/* 除了禁用的 */
button:not(:disabled) {
  cursor: pointer;
}

/* 除了空的 */
input:not(:placeholder-shown) {
  border-color: #3b82f6;
}

/* 传统写法 */
p:not(.intro):not(.outro) {
  text-indent: 2em;
}

/* 现代写法 */
p:not(.intro, .outro) {
  text-indent: 2em;
}

p:not(#special) {
  /* 优先级 = 1-0-1（#special 的 1-0-0 + p 的 0-0-1） */
}

/* 除了第一个的所有元素 */
.item:not(:first-child) {
  margin-top: 1rem;
}

/* 除了类名包含 "no-" 的 */
[class]:not([class*='no-']) {
  /* ... */
}

/* 不是链接的可点击元素 */
[role='button']:not(a) {
  cursor: pointer;
}

/* 包含链接的导航项，但不是当前页面 */
nav li:has(a):not(:has([aria-current])) {
  opacity: 0.8;
}

/* 任何标题后面紧跟段落的情况 */
:is(h1, h2, h3):has(+ p) {
  margin-bottom: 0.5rem;
}

/* 表单中有无效输入时的提交按钮 */
form:has(input:invalid) button[type='submit'] {
  opacity: 0.5;
  pointer-events: none;
}

/* 简化复杂的否定选择 */
:where(article, section):not(:has(h1, h2, h3)) {
  border-top: 1px solid #e5e7eb;
}

/* 基础样式 */
.table tr {
  transition: background-color 0.2s;
}

/* 悬停行（但不是表头） */
.table tr:not(:has(th)):hover {
  background-color: #f3f4f6;
}

/* 选中行 */
.table tr:has(input:checked) {
  background-color: #eff6ff;
}

/* 包含错误的行 */
.table tr:has(.error) {
  background-color: #fef2f2;
}

.nav-item {
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

/* 有子菜单的项目 */
.nav-item:has(.dropdown) {
  padding-right: 2rem;
  position: relative;
}

.nav-item:has(.dropdown)::after {
  content: '▼';
  position: absolute;
  right: 0.75rem;
  font-size: 0.75em;
}

/* 激活状态（任意后代匹配 aria-current） */
.nav-item:has([aria-current]) {
  background-color: #eff6ff;
  color: #3b82f6;
}

.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 有封面图的卡片 */
.card:has(.card-cover) {
  display: flex;
  flex-direction: column;
}

.card:has(.card-cover) .card-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 没有封面图的卡片 */
.card:not(:has(.card-cover)) {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
}

/* 有徽章的卡片 */
.card:has(.badge) {
  position: relative;
}

.card:has(.badge) .badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}