如何为CSS多选择器应用相同规则？汉堡菜单hover样式单行写法求解

1. 如何为多个选择器应用相同的样式规则？ #

要给多个选择器设置相同的样式，最直接的方法就是用逗号把这些选择器分隔开，然后在后面的大括号里编写共同的样式规则。这样所有被逗号分隔的选择器都会共享这套样式，不用重复编写多次规则。

举个实用的例子：

p, .text-card, #page-header {
  color: #2d2d2d;
  font-size: 16px;
  line-height: 1.6;
}

上面的代码会同时给 <p> 标签、拥有 .text-card 类的元素，以及 ID 为 page-header 的元素设置相同的文字样式。逗号后面建议加空格（提升可读性），也可以不加，保持统一的格式会让代码更整洁。

2. 合并汉堡菜单悬停样式到一行 #

你当前的代码重复了 .hamburger-box:hover 前缀，其实可以把三个目标选择器用逗号分隔，放在同一个样式规则里，这样就能合并成一行（如果追求紧凑写法），或者保持换行提升可读性。

合并后的原生CSS代码如下：

.hamburger-box:hover .hamburger-inner, .hamburger-box:hover .hamburger-inner:before, .hamburger-box:hover .hamburger-inner:after { background: red; }

如果日常使用CSS预处理器（比如Sass/Less），还可以用嵌套写法进一步简化代码：

.hamburger-box:hover {
  .hamburger-inner {
    &, &:before, &:after {
      background: red;
    }
  }
}

不过如果是原生CSS环境，直接用逗号分隔选择器的方式是最稳妥的解决方案。

内容的提问来源于stack exchange，提问作者Aspid