0

如何在 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>

4

2 回答 2

6

你必须这样做:

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

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

于 2012-10-23T15:49:26.660 回答
1

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;
}
于 2012-10-23T15:56:03.550 回答