在CSS / SCSS中是否有更动态的方法来针对兄弟姐妹？

Question

我正在做的代码看起来是这样的-一直到50.(不理想)

可以有从1到100个锚/div组合，但更多的时候不是以个位数，所以几乎总是有许多多余的CSS规则。

我想知道是否有更好的方法来编写CSS / SCSS，而不是手动为每个可能的结果编写代码？或者只有使用JS才能做到这一点？

.content { display: none; }
.anchor-1:hover ~ .content-1,
.anchor-2:hover ~ .content-2,
.anchor-3:hover ~ .content-3,
.anchor-4:hover ~ .content-4,
.anchor-5:hover ~ .content-5 { display: block; }

我还在这里篡改了代码：https://jsfiddle.net/rn437pw8/8/

Answer 1

的确有!您可以使用:nth-child()多种方法来选择特定包装器的子元素，例如奇数或偶数元素、一系列元素、4个其他元素之后的3个元素和重复。

检查此生成器以创建规则，并帮助您可视化将选择哪些元素：https://css-tricks.com/examples/nth-child-tester/

博士：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child