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

我有一个装有汉堡包的容器。这会在悬停容器时更改颜色。哪种方法是在一行代码中编写此代码的正确方法：

.汉堡盒：悬停。汉堡内部{背景：红色；}
.汉堡包盒：悬停。汉堡包内部：在{背景：红色；}之前
.汉堡包盒：悬停。汉堡包内部：在{背景：红色；}之后

我已经尝试了很多可能性。我想这是一个非常简单的答案，但我不知道

.hamburger box{位置：相对；显示：内联块；宽度：120px；高度：24px}
.hamburger内部{顶部：50%；显示：块；页边顶部：-2px}
.hamburger-inner、.hamburger-inner:after、.hamburger-inner:before{位置：绝对；宽度：100%；高度：3px；过渡计时功能：轻松；过渡持续时间：15s；过渡属性：变换；边框半径：4px；背景色：浅灰色}
.hamburger-inner:之后，.hamburger-inner:之前{显示：块；内容：“”
.汉堡内胆：{top:-10px}之前
.汉堡内胆：{bottom:-10px}之后
.汉堡盒：悬停。汉堡内部{背景：红色；}
.汉堡包盒：悬停。汉堡包内部：在{背景：红色；}之前
.汉堡包盒：悬停。汉堡包内部：在{背景：红色；}之后

---

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

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

---

.hamburger box:hover.hamburger-inner、.hamburger-box:hover.hamburger-inner:：before、.hamburger-box:hover.hamburger-inner:：after{background:red；}

正确，但是伪元素是使用双冒号引用的

：

，所以它必须是

：：before

和

：：before

和

：：after

@conneso感谢您纠正了错误。是的，您应该使用

：

编写css3，但是

：

也可以。我不认为浏览器会停止接受css2语法。我认为会有一个更简单的方法。反正我不知道双冒号。