如何在类和悬停元素之间应用元素样式？

Question

我尝试优化我的日历小部件。我想用单独的颜色填充 之间的所有元素selected_first（button:hover参见代码示例）：

body {

  background: #000;

}

div {

  counter-reset: btn;

  display: flex;

  flex-flow: row wrap;

  max-width: 200px;

}

button {

  flex: 0 0 20%;

  display: block;

  height: 30px;

  border: 0;

  background-color: #333;

  color: #fff;

  border: 1px solid #000;;

}

button:before {

  counter-increment: btn;

  content: counter(btn);

}

button[value="selected_first"] {

  background: green !important;

}

button[value="selected_first"] ~ button, button:hover {

  background: blue;

}

button[value="selected_first"] ~ button:hover ~ button {

  background: #333;

   }

<div>

  <button></button>

  <button></button>

  <button value="selected_first"></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

</div>

当鼠标悬停在按钮上时它对我有用。但当没有任何按钮悬停时，它不起作用。它应该看起来像这样： 预期结果

但当没有任何按钮悬停时，它们仍然具有蓝色背景。

Answer 1

考虑悬停在父元素上body {&nbsp; background: #000;}div {&nbsp; counter-reset: btn;&nbsp; display: flex;&nbsp; flex-flow: row wrap;&nbsp; max-width: 200px;}button {&nbsp; flex: 0 0 20%;&nbsp; display: block;&nbsp; height: 30px;&nbsp; border: 0;&nbsp; background-color: #333;&nbsp; color: #fff;&nbsp; border: 1px solid #000;;}button:before {&nbsp; counter-increment: btn;&nbsp; content: counter(btn);}button[value="selected_first"] {&nbsp; background: green !important;}div:hover button[value="selected_first"] ~ button,div:hover button:hover {&nbsp; background: blue;}div:hover&nbsp; button:hover ~ button {&nbsp; background: #333;&nbsp;}<div>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button value="selected_first"></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button></div>