Question

考虑以下代码（使用sass）：

#wrapper {
  .switch-element:nth-child(even) {
  }
  
  .switch-element:nth-child(odd) {
  }
}

<div class="wrapper">
  <div class="normal-element">Element that needs to stay the same and should not be counted.</div>
  <div class="normal-element">Element that needs to stay the same and should not be counted.</div>
  <div class="switch-element">Element that needs to change and should be counted.</div>
  <div class="normal-element">Element that needs to stay the same and should not be counted.</div>
  <div class="switch-element">Element that needs to change and should be counted.</div>
</div>

这会计算包装器的每个子节点，使第一个元素为“normal-element”，“1”（奇数），第二个元素为“normal-element”，“2”（偶数），第三个元素为“switch-元素“，”3“（奇数），第四个元素”正常元素“，”4“（偶数），第五个元素”switch-element“，”5“（奇数）。

我想这样做，它忽略了所有的普通元素，只计算switch-elements。使第一个开关元件奇数和第二个开关元件均匀。

有什么想法吗？

Answer 1

你想要的实际上是:nth-of-type(2n)选择器，它与:nth-of-type(2n+1)（甚至选择类型的子项）和section（选择类型的奇数子项）的工作方式类似。

可悲的是，没有这样的选择器，而且你的结构也不可能。您需要将div分组或将div更改为其他元素，例如:nth-of-type并使用odd（非常奇怪，绝对不推荐）或只渲染其他even / {{1}}类对于所有元素。

请参阅：Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

选择包含特定类

1 个答案: