0

我有以下代码片段：

<div class="data">
    <h2>Some Title</h2>
    <div id="aPanel75" class="aPanel">
        <span>
            <div class="nameValueHelp field">
                <span class="name">Field Label 1</span>
                <span class="value"><span>Value 1</span></span>
                <span class="help">...</span>
            </div>
        </span>
        <span>
            <div class="nameValueHelp field">
                <span class="name">Field Label 2</span>
                <span class="value"><span>Value 2</span></span>
                <span class="help">...</span>
            </div>
        </span>
        <span>
            <div class="nameValueHelp field">
                <span class="name">Field Label 3</span>
                <span class="value"><span>Value 3</span></span>
                <span class="help">...</span>
            </div>
        </span>
    </div>
</div>

用一点 jQuery 和 CSS 得到斑马条纹：

$('.data .field').filter(':even').addClass('odd');

和

.data .odd {
    background-color: #EDF0F5;
}

我想摆脱添加“奇数”类的jQuery，只使用CSS。我尝试了 CSS nth-child 选择器（也是 nth-of-type）的各种组合。但似乎没有任何效果，我得到了所有的灰色，没有白色。

我认为 div.field 周围那些多余的 span 标签是问题所在，但不幸的是，我无法轻松更改底层 HTML 结构或更改任何标签类。

请问有什么建议吗？

4

1 回答 1

3

您不能使用.field:nth-child(odd)or .field:nth-of-type(odd)，因为 every是其 parent.field的第一个也是唯一的孩子。那可能是你被卡住的地方。divspan

由于每个.field都嵌入在其自己的 parentspan中，并且每个span都是您的 panel 的子级div，因此您可以使用以下命令：

.data > .aPanel > span:nth-child(odd) > .field

尽管我应该说，尽管您不能更改标记，但将divs 嵌入到spans 中仍然是相当不寻常的......即使浏览器会愉快地相应地构造 DOM，请记住，依赖它是不明智的这种行为一直存在。

于 2012-05-17T09:19:46.963 回答