主题背景与目标
并列选择器的核心概念
并列选择器，也称为分组选择器，是指用逗号分隔的多个选择器，语义上等价于把同一组样式同时应用到不同的选择对象。通过此方法可以在不同组件中复用同一份样式定义，提升维护性。
在前端架构中，跨组件样式统一往往带来命名冲突和样式权重的问题。使用并列选择器可以将“基线样式”集中管理，避免逐个组件逐一复制。
/* 示例：基线按钮可以在多个组件中共用 */
.btn, .card .btn, .modal .btn {padding: 0.5rem 1rem;border-radius: 6px;background: var(--color-primary);color: #fff;
}
跨组件统一样式的难点
尽管并列选择器提供了统一入口，但在大型应用中仍需控制冲突、命名空间以及层级上下文，避免影响到非目标区域。
并列选择器的语法要点
分组选择器的写法
分组选择器通过逗号分隔，浏览器会把每个分组独立计算权重和应用样式，因此可以把相同风格分发给不同的组件路径。
注意点是：每个分组都要保持权重一致，避免某些分组被其他规则覆盖导致样式漂移。
权重与特异性的影响
使用并列选择器时，如果分组之间存在不同父容器，父容器的样式可能对分组中的元素产生不同影响，因此需要通过结构化选择器来确保一致性。
:root {--btn-primary: #2563eb;
}
.site-header .btn, .card .btn, .modal .btn {background: var(--btn-primary);color: #fff;
}
实战：跨组件的按钮风格统一
方案设计
目标是在不同组件中获得相同按钮风格，同时允许各自的父容器对大小、对齐进行微调。核心在于建立基线样式和上下文覆盖两层。
基线样式包括尺寸、圆角、内边距和色彩变量，确保同类控件在视觉层面的统一。
实现代码与示例
利用并列选择器把基线样式分发到不同组件中的按钮元素。对特定上下文再通过更具体选择器进行覆盖，而不影响基线。
/* 基线按钮风格，适用于多个组件 */
.btn, .card .btn, .modal .btn {padding: 0.6rem 1.2rem;border-radius: 8px;background: var(--color-primary);color: white;border: none;cursor: pointer;
}
/* 上下文覆盖：卡片中的按钮需要更小的内边距 */
.card .btn {padding: 0.4rem 0.8rem;
}
实战：卡片与标题等同样部分的统一
结构映射与选择器分组
不同组件常有头部、标记、副标题等重复部分。通过并列选择器，把这些重复部分的样式分发到组件模板中相同的子元素。
将头部标题、卡片头部等统一使用相同的字体、颜色和边距设置，可提升全局一致性。
响应式与可维护性
在不同视口下保持一致性，需要把变量和断点嵌入到分组选择器中，避免每个组件单独写一套断点。
:root {--heading-color: #1f2937;--heading-font: 700;
}
.card .card-header-title, .modal .modal-header-title, .site-header .site-title {font-size: 1.25rem;color: var(--heading-color);font-weight: var(--heading-font);
}
@media (min-width: 768px) {.card .card-header-title, .modal .modal-header-title {font-size: 1.5rem;}
}
变量与命名空间在并列选择器中的作用
变量的作用
使用CSS变量把颜色、间距等可复用属性提取出来，通过变量驱动的统一样式来达到跨组件的一致性。
命名规范要与组件域对齐，避免同名变量在不同组件间产生冲突。通过命名空间来区分，例如 --btn-、--card-、--modal-。
:root {--color-primary: #2563eb;--gap-base: 0.75rem;
}
.card, .modal, .site-header {--group-gap: var(--gap-base);
}
.btn { padding: var(--gap-base) calc(var(--gap-base) * 1.25); }
命名冲突与空间管理
当全局变量与局部变量同名时，后者会覆盖前者。通过限定变量作用域和引入命名空间，可以在保持全局风格的前提下实现局部定制。
在实际项目中，建议把变量放入组件特定的根选择器内，如 .card、.modal 等，以实现可控范围内的风格一致性。
进阶技巧：与现代理念结合
媒体查询中的统一性
响应式设计要求在不同设备上保持一致的视觉语言。通过在分组选择器中嵌入媒体查询，可以让相同部分在所有组件中保持一致。
例如，在大屏幕上放大标题、在小屏幕上收缩字号，而分组选择器把基线样式统一管理。
组件化场景的落地
前端框架如 React、Vue 常用类名体系。通过统一的类名分组与全局变量，让各组件的同类元素共享样式，降低重复工作。
/* 在 JSX/模板中可以写成统一的类名组： */
/* 使用分组选择器把它们映射到同一风格 */
.btn, .card .btn, .modal .btn { padding: 0.5rem 1rem; border-radius: 6px; }
