如何在span标签中使用CSS的nth-child？

Question

显然，nth-child伪类在表格的td或tr标签中起作用得很好，但是对于span标签呢？ HTML:

<div id="refals_wr" style="font: normal 14px Verdana, Geneva, sans-serif; border-top: 2px dashed #CCC;">
    <table width="100%" border="0" cellspacing="5" cellpadding="5">
        <tr>
            <td>
                <div>
                    <span>NAME OF SORTING ALGORITHM:</span><br />
                    <span id="algName">Bubble Sort</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </td>
            <td>
                <div>
                    <span>TOTAL SWAPS:</span><br />
                    <span id="algTotalSwaps">50</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </td>
            <td>
                <div>
                    <span>SWAP COUNT:</span><br />
                    <span id="algSwapCount">8</span>
                </div>
            </td>
        </tr>
    </table>
</div>

CSS：

#refals_wr span:nth-child(odd)  { color: green;  }
#refals_wr span:nth-child(even) { color: orange; }

没有达到预期的结果，所有内容都是绿色的！此外，最后一个（在SWAP COUNT下面包含数字“8”的那个）不应该受到着色的影响。

有更好的方法吗？

演示链接：http://jsfiddle.net/xzdv5csp/

- Universal Grasp

---

给定这个标记，第一个子元素是 span，第二个子元素是 br，最后一个 span 是每个 div 的第三个子元素。这解释了行为。正如 srekoble 建议的那样，nth-of-type 仅考虑一个类型的元素（即此处的 spans）。 - Ilya Streltsyn

Answer 1

您应该使用nth-of-type。

#refals_wr span:nth-of-type(odd){
    color:green;}

#refals_wr span:nth-of-type(even){
    color:orange;}

一个例子：http://jsfiddle.net/xzdv5csp/1/

- Vangel Tzo

---

运行良好，nth-type-of在浏览器兼容性方面如何？有什么想法吗？ - Universal Grasp

@UniversalGrasp 你可以在这里检查支持情况 http://caniuse.com/#feat=css-sel3 - Vangel Tzo

浏览器支持与 nth-child 相同：http://caniuse.com/#search=nth-of-type - Ilya Streltsyn

你能帮忙吗？如果我想排除最后一个子元素怎么办？有什么想法吗？我尝试了 #refals_wr #refals_wr span:nth-of-type(even):not(last-child) 和 #refals_wr span:nth-of-type(even), #refals_wr span:not(:last-child)，但都没有得到期望的结果。如果可以的话，请帮忙解决，谢谢。 - Universal Grasp

@UniversalGrasp，你想给last-child什么样式？你可以使用:last-of-type。 - Vangel Tzo

Answer 2

:nth-child 选择器匹配其父元素下第几个子元素。在 div 元素内部的 <br> 元素导致选择器中的奇偶数部分失效，因为它使两个 span 标签成为父元素下的奇数子元素（第一和第三个）。

以下替代方案应该可以解决这个问题，即使在不支持高级选择器的浏览器中也适用:

#refals_wr span { color: green; }
#refals_wr span[id] { color: orange; }

/* Or */

#refals_wr span { color: orange; }
#refals_wr span:first-child { color: green; }

更新的演示

---

既然您提到最后一个单元格中的最后一个 span 必须被特殊处理，有几种方法可以做到这一点，但它们都涉及到针对或排除最后一个 td 元素。以下是一个使用 :not() 的示例：

#refals_wr span { color: green; }
#refals_wr td:not(:last-child) span[id] { color: orange; }

/* Or */

#refals_wr2 span { color: green; }
#refals_wr2 td:not(:last-child) span:last-child { color: orange; }

更新的演示

如果您想避免使用:not()因为浏览器支持问题，那么您可以使用以下方法：

• td:last-child
• td:first-child, td:first-child + td

- Salman A

Answer 3

TRY - DEMO

#refals_wr span {
    color:orange;
}

#refals_wr span:nth-child(1) {
    color:green;
}

- Anonymous

---

http://css-tricks.com/how-nth-child-works/ 和 http://www.w3schools.com/cssref/sel_nth-child.asp 是关于编程的内容。 - Anonymous

使用公式（an + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。 - Anonymous

“3n + 1” 不是必需的。使用“:nth-child(1)”或“:first-child”即可定位到第一个子元素。 - Salman A

Answer 4

试试这个：

div:nth-child(even) span{
    color:orange;
}

div:nth-child() span{
    color:Green;
}

- Ashwin