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

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 {

  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;

}

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

div:hover button:hover {

  background: blue;

}

div:hover  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>