选择包含特定类的奇数和偶数类[重复]答案

【问题标题】：Selecting a class with odd and even that contains a specific class [duplicate]选择包含特定类的奇数和偶数类[重复]
【发布时间】：2016-06-22 12:52:44
【问题描述】：

考虑以下代码（使用 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>

这将计算包装器的每个子元素，使第一个元素“正常元素”、“1”（奇数）、第二个元素“正常元素”、“2”（偶数）、第三个元素“开关-元素”，“3”（奇数），第四个元素“正常元素”，“4”（偶数），第五个元素“开关元素”，“5”（奇数）。

我想让它忽略所有正常元素，只计算开关元素。使第一个开关元件为奇数，第二个开关元件为偶数。

有什么想法吗？

【问题讨论】：

标签： html css css-selectors selector

【解决方案1】：

您实际上想要的是:nth-of-class 选择器，它的工作方式类似于:nth-of-type(2n)（选择偶数子类型）和:nth-of-type(2n+1)（选择奇数子类型）。

遗憾的是，没有这样的选择器，并且不可能与您拥有的结构有关。您需要将 div 分组或将 div 更改为其他元素，如 section 并使用 :nth-of-type（非常奇怪，绝对不推荐）或者只为所有元素渲染额外的 odd/even 类。

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

【讨论】：