有没有办法全局选择nth-child？

Question

我有一个看起来像这样的 HTML 结构，我想全局选择所有奇数

<span>

s 忽略它们的父元素。

有没有办法让

1

,

3

,

5

,

7

,

9

变红？我试过

:nth-child(odd)

但我认为它只在本地有效。

body {
  counter-reset: spans;
}

span {
  counter-increment: spans;
}

span::after {
  content: counter(spans);
}
    
span:nth-child(odd) {
  color: red;
}

<div>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 1

不，这不是

:nth-child()

和

:nth-of-type()

选择器的工作方式：

• :nth-child(expr)

  仅选择其包含的父元素中的序号位置满足

  expr

  的元素，而不是它们在整个文档或任何其他任意祖先中的序号位置：只有它们在直接父元素中的序号位置才重要。

• :nth-of-type

  仅选择满足 expr 的其兄弟姐妹中序号位置为 的元素，这也意味着选择器的评估独立于 DOM 树中的“表兄弟”元素。
• ...所以你所问的目前仅使用 CSS 选择器是不可能的：没有

  :nth-overall

  或

  :nth-of-type-overall

  伪类选择器。
• 您仍然可以使用客户端脚本来实现这一点，以便在文档加载时手动将命名类添加到这些元素。

即像这样：

const allSpans = document.getElementsByTagName("span");
for( let i = 1; i < allSpans.length; i += 2 ) {
    allSpans[i].classList.add( 'isGloballyOdd' );
}

body {
  counter-reset: spans;
}

span {
  counter-increment: spans;
}

span::after {
  content: counter(spans);
}
    
span.isGloballyOdd {
  color: red;
}

<div>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

...看起来像这样：