html - 如何将相同的规则应用于CSS中的多个选择器

我有一个装汉堡包的容器。这将在悬停容器时更改颜色。哪一种方法可以用一行代码来编写：
.hamburger-box:hover .hamburger-inner{background:red;}.hamburger-box:hover .hamburger-inner:before{background:red;}.hamburger-box:hover .hamburger-inner:after{background:red;}
我已经尝试了很多可能性。我想答案很简单，但我不知道。

.hamburger-box{position:relative; display:inline-block; width:120px;height:24px}
.hamburger-inner{top:50%; display:block; margin-top:-2px}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute; width:100%; height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:lightgray}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}
.hamburger-inner:before{top:-10px}
.hamburger-inner:after{bottom:-10px}
.hamburger-box:hover .hamburger-inner{background:red;}
.hamburger-box:hover .hamburger-inner:before{background:red;}
.hamburger-box:hover .hamburger-inner:after{background:red;}

<div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>

最佳答案

您只需列出选择器，用逗号分隔：

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