如何编写条件css？

【问题标题】：How to write conditional css?如何编写条件css？
【发布时间】：2016-11-27 23:32:58
【问题描述】：

如果用户将鼠标悬停在 div1 上，div2 应该会突出显示。如何编写这样的条件css？ HTML：

<body>
  <div class='div1'></div>
  <div class='div2'></div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

这里我使用了兄弟选择器~。

div {
  height: 30px;
}
.div1 {
  background: red;
}
.div2 {
  background: blue;
}
.div1:hover ~ .div2 {
  background: yellow;
}

<div class='div1'></div>
<div class='div2'></div>

如果有超过 1 个 div2 并且您只希望第一个立即使用相邻兄弟选择器 +

div {
  height: 30px;
  margin-top: 5px;
}
.div1 {
  background: red;
}
.div2 {
  background: blue;
}
.div1:hover + .div2 {
  background: yellow;
}

<div class='div1'></div>
<div class='div2'></div>
<div class='div2'></div>

【讨论】：