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

Question

我有一个汉堡包。这会在悬停容器时改变颜色。哪一个是在一行代码中编写它的正确方法： .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>

Answer 1

您只需列出您的选择器，以逗号,分隔：

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