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

Question

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

我本来期望span:nth-of-type(odd)和span:nth-of-type(even)工作,但他们没有.

有问题的页面如下:

<style>
  span:nth-of-type(even) {
    background-color: grey;
  }

  span:nth-of-type(odd) {
    background-color: blue;
  }
</style>
<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>

这是一个JSFiddle来显示实际问题.

​

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>都是奇数元素,因为它们都是第一个子元素.并且两者都以您定义CSS规则的方式被选中.这里的CSS规则选择他们的父母,因为他们可以交替,并相应地设置孩子的风格.