css - 如何在 ul 标签中使用 nth-of-type 设置样式？

Question

如何在 a的元素中包含的元素nth-of-type上使用 css 选择器？<span><li><ul>

我会期待span:nth-of-type(odd)并span:nth-of-type(even)工作，但他们没有。

span:nth-of-type(even) {
  background-color: grey;
}
    
span:nth-of-type(odd) {
  background-color: blue;
}

<ul>
  <li>
    <span>Test 1</span>
  </li>
  <li>
    <span> 2 Test</span>
  </li>
</ul>
    
<br>
Should look like this:
<br>
<span>Test 1</span>
<br>
<span> 2 Test</span>

Answer 1

你必须这样做：

li:nth-of-type(odd) > span {}
li:nth-of-type(even) > span {}

选择器nth-of-type（还有first-child,last-child或nth-child）指的是他们的父母。在这种情况下，父级是<li>-tag。所以两个<span>s 都是奇数元素，因为它们都是第一个子元素。两者都以您定义 CSS 规则的方式被选中。这里的 CSS 规则选择他们的父母，因为他们可以交替并相应地为孩子设置样式。

Answer 2

nth您要计算的元素是元素，<li>而不是<span>元素。没有理由使用nth-of-typeover nth-child，因为<ul>元素只能包含<li>子元素：

li:nth-child(even) > span {
    background-color: gray;
}
li:nth-child(odd) > span {
    background-color: blue;
}