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

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; }

不给出理想的结果,一切都是绿色的!此外,最后的跨度(在包含数字"8" SWAP COUNT的那个)应该不被在着色的影响.

有没有更好的办法？

小提琴: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/