多个选择器共用样式时用逗号分隔，嵌套结构中用空格组合避免重复父类名，属性选择器可替代冗余class，BEM命名下组合选择器宜用于修饰符批量控制，需警惕过度嵌套。

多个选择器共用同一组样式时怎么写

直接用逗号分隔，而不是重复写规则块。这是最基础也最容易被忽略的减冗方式。

• 错误写法：

  .header { color: #333; }
  .nav { color: #333; }
  .footer { color: #333; }

• 正确写法：

  .header, .nav, .footer {
    color: #333;
  }

• 逗号是「或」关系，不是「和」；.a, .b 匹配所有 .a 元素 或 所有 .b 元素
• 注意空格：逗号前后可加空格提升可读性，但不能写成 .a ,.b（IE8 及更早版本在某些场景下会解析失败）

嵌套结构中避免重复写父级类名

当多个子元素都属于同一个容器，且样式只在该容器内生效时，用空格组合比重复写父类更安全、更易维护。

• 不推荐：

  .article-title { font-size: 24px; }
  .article-content { font-size: 16px; }
  .article-footer { margin-top: 20px; }

• 推荐：

  .article .title { font-size: 24px; }
  .article .content { font-size: 16px; }
  .article .footer { margin-top: 20px; }

• 这样改后，.title 类即使在其他地方出现也不会被误匹配，语义和作用域更清晰
• 如果后续要整体移动到 .post 容器下，只需改一处 .article → .post

用属性选择器代替一堆 class 名

当一组元素靠相似属性（比如 data-type、type、role）区分，而样式逻辑高度一致时，属性选择器能大幅压缩代码量。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 例如统一处理所有带 data-status="error" 的表单控件：

  [data-status="error"] {
    border-color: #e74c3c;
    background-color: #fdf2f2;
  }

• 也可配合伪类：

  [type="text"]:invalid, [type="email"]:invalid {
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
  }

• 注意：属性值匹配默认区分大小写，[lang="en"] 不匹配 lang="EN"；如需不敏感，用 [lang="en" i]

BEM 命名 + 组合选择器的实用边界

BEM（block__element--modifier）本身已减少嵌套依赖，但组合选择器仍可用于修饰符批量控制或状态归并。

• 比如统一禁用所有带 --disabled 修饰符的组件：

  .btn--disabled,
  .input--disabled,
  .select--disabled {
    opacity: 0.5;
    pointer-events: none;
  }

• 不要写成 .btn--disabled, .btn__icon--disabled —— 后者属于元素层级，语义不同，应单独处理
• 真正要警惕的是过度组合：.page-home .section-featured .card .title 这类 4 层深度选择器，既难维护又影响性能，应优先用 BEM 单一类名替代

实际项目里，组合选择器的“省代码”效果，往往取决于你是否提前想清楚样式的作用域和复用边界。写得越细，后期改得越痛；写得太泛，又容易污染全局。关键不是少写几行，而是让每一行都明确回答：这个样式，到底该在哪生效、不该在哪生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！