Question

我有以下代码段：

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

我想摆脱添加'奇怪'类并只使用CSS的jQuery。我已经尝试了CSS nth-child选择器的各种组合（也是nth-of-type）。但似乎没有任何作用，我全都变灰了，没有白色。

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

有什么建议吗？

Answer 1

您无法使用.field:nth-child(odd)或.field:nth-of-type(odd)，因为每个.field是其父div的第一个也是唯一的子span。那可能是你被卡住的地方。

由于每个.field都嵌入在自己的父span中，并且每个span都是您的小组div的子级，因此您可以使用此代码：

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

虽然我应该说，尽管你无法改变标记，div嵌入span内仍然很不寻常......即使浏览器很乐意构建相应地，DOM，请记住，始终依赖这种行为是不明智的。

斑马条纹与CSS选择器

1 个答案: