CSS：样式第 n 个兄弟

Question

是否可以在纯 CSS 中设置第 n 个兄弟的样式？

例如，当悬停在 1-st .child --- 时，我们可以设置 4-th 或 5-th .child 吗？

 <div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

更新 我想我的问题有点不正确。对不起。

我的意思是我可以为我悬停的 .child 的第 n 个兄弟设置样式吗？

即样式 4-th .child 当悬停在 1-st 时 .child ;样式 5-th .child 当悬停在 2-nd 等时。

原文由 Zurab 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你当然可以。您将 通用兄弟选择器 (~) 与 :hover 结合使用。

 .child:first-of-type:hover ~ .child:nth-of-type(4) {
  color: red;
}

 <div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

~ 组合符分隔两个选择器，并且仅当第二个元素在第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

更新

更新我想我的问题有点不正确。对不起。

我的意思是 我可以为悬停的 .child 设置第 n 个兄弟的样式 吗？

不，因为据我所知，没有办法“计算兄弟姐妹”。你可以解决这个问题，比如说你想在悬停时突出显示每个 .child 的第二个兄弟。

 .child:nth-of-type(1):hover ~ .child:nth-of-type(3) {
  color: red;
}

.child:nth-of-type(2):hover ~ .child:nth-of-type(4) {
  color: red;
}

.child:nth-of-type(3):hover ~ .child:nth-of-type(5) {
  color: red;
}

.child:nth-of-type(4):hover ~ .child:nth-of-type(6) {
  color: red;
}

.child:nth-of-type(5):hover ~ .child:nth-of-type(7) {
  color: red;
}

 <div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

为了简化这个任务，你可能想要使用像 SASS 这样的预处理器：

 @each $i in (1, 2, 3, 4, 5) {
  .child:nth-of-type(#{$i}):hover ~ .child:nth-of-type(#{$i + 2}) {
    color: red;
  }
}

这将生成上面的 CSS。

原文由 SVSchmidt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

 .child {
  border: 1px solid;
  width: 3em;
  height: 3em;
  text-align: center;
  line-height: 3em;
}

.child:first-child:hover~.child:nth-child(4),
.child:first-child:hover~.child:nth-child(5) {
  background-color: red;
}

 <div class="parent">
  <div class="child"> 1 </div>
  <div class="child"> 2 </div>
  <div class="child"> 3 </div>
  <div class="child"> 4 </div>
  <div class="child"> 5 </div>
</div>

原文由 Andrei Fedorov 发布，翻译遵循 CC BY-SA 3.0 许可协议