Question

显然，nth-child伪与表中的tds或trs一起运行良好。但是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下包含数字＆＃34; 8＆＃34;）应该不在着色中受到影响。

有更好的方法吗？

小提琴：http://jsfiddle.net/xzdv5csp/

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/

Answer 2

尝试 - DEMO

#refals_wr span {
    color:orange;
}

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

Answer 3

如果元素是其父元素的指定子元素，则

:nth-child匹配。 div中的<br>元素导致选择器的奇数和偶数部分失败，因为它使两个跨越其父级的奇数子（第1和第3）。

即使在蹩脚的浏览器中，以下替代方案也应该有效：

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

/* Or */

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

Updated Demo

现在你提到必须区别对待最后一个单元格中的最后一个跨区，有几种方法可以做到，但它们都涉及定位或排除最后一个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; }

Updated Demo

如果由于浏览器支持而要避免:not()，那么您可以使用例如：

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

Answer 4

尝试一下：

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

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

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

4 个答案: