Question

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

我原本期望<ul>和span:nth-of-type(odd)能够正常工作，但事实并非如此。

相关网页如下：

span:nth-of-type(even)

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

Answer 2

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

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

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

2 个答案: