CSS:风格nth兄弟

Question

是否可以在纯CSS中设计第n个兄弟？
例如,.child当我在1-st上悬停时,我们可以设置第4或第5个样式.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个兄弟姐妹定型吗？

即.child在1-st上悬停时的第4个样式.child; .child在2 号位置悬停等时的第5个样式

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>

〜组合器分离两个选择器,并且仅当第二个元素前面有第一个元素时才匹配第二个元素,并且它们共享一个公共父元素.

UPDATE

更新我想我的问题有点不正确.对不起,请原谅.

我的意思是,我可以选择徘徊的兄弟姐妹吗？

不,因为据我所知,没有办法"计算兄弟姐妹".你可以解决这个问题,比如你想.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.