在父母悬停时设置多个孩子的样式

Question

所以回到我的CSS，我想在父母div徘徊时改变多个div的背景颜色。我基本上做的是用3个div创建一个汉堡菜单，并希望改变它的颜色从黑色 - >白色时徘徊。

我目前的解决方案是

.burger_container:hover  .bar1{
  background-color: white;
}
.burger_container:hover  .bar2{
  background-color: white;
}
.burger_container:hover  .bar3{
  background-color: white;
}

我考虑的另一件事是给他们另一个类ID，比如

<div class="bar bar3"></div>，然后能够做到

.burger_container:hover  .bar{
  background-color: white;
}

对于多个孩子，有更好的方法吗？我的解决方案看起来很笨拙。如果我发布的其中一个解决方案被认为是“正确的方法”，请告诉我。干杯，

Answer 1

如果这三个是他们父母的唯一孩子，你可以使用

.burger_container:hover > * {}

如果不是，你可以使用

.burger_container:hover > [class^="bar"] {}

您不需要（也不应该使用）类作为ids。使用ids作为唯一标识符和类作为集合成员标识符。 CSS和JavaScript都针对此范例进行了优化。

除此之外，您的目标是使用尽可能少的代码完成工作，同时保持其可读性和可维护性。这就是为什么你的版本1真的很糟糕，不仅仅是为了更长，而且因为如果你想稍后改变你需要在3个地方修改它而不是只有一个。遵循相同的原则，如果你发现自己想要为一个元素的所有孩子添加一个class，你最好将class添加到父母并选择.yourClass > *，其中.yourClass是父选择器，*是子选择器（你可能想要使用比任何更具体的东西（*）。

要将上述所有内容应用于您的案例，并尽可能使用最快的代码，如果您的所有页面中只有一个这样的实例，那么我认为这是最佳做法：

#hamburger-icon > div {
  background-color: #fff;
}

<div id="hamburger-icon">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

给出以下HTML

<div class="burger_container">
    <div></div>
    <div></div>
    <div></div>
</div>

您可以使用更改所有子div

.burger_container:hover div {
    background-color: white;
}

Answer 3

你的第二种选择将是最理想的选择。这样做可以保持代码干燥，并为条形添加基类，以便将来使用默认样式。