Question

我有一块像这样的CSS：

.formTable:nth-child(odd)
{
    background-color: #eeb;
}

我还有一个具有以下基本结构的表单（显然不是完整的HTML）。值得注意的是在某些情况下加载了AJAX调用的dynTable1。

<table class="formTable" id="table1" />
<table class="formTable" id="table2" />
<table class="formTable" id="table3" />
<table class="formTable" id="table4" />
<div id="divDynamic1" class="fadeIn">
    <table class="formTable" id="dynTable1" />
</div>

对我来说没有意义的是，nth-child选择器会在Firefox和IE9上对table2，table4和dynTable1进行关键（我没有尝试别人）。我原以为dynTable1没有应用它的样式。显然我对nth-child如何运作的理解是缺乏的，但是当我的Google-fu发现了许多如何使用nth-child的例子时，我很难找到一个简单的解释，说明它在这种情况下是如何工作的。所以，我转向SO。

为什么nth-child的行为与此类似，如何在类table的{{1}}元素之间严格交替？

Answer 1

:nth-child(odd)适用于他们自己的父容器的第1，第3，第5等孩子的元素，而不是他们的孩子。我猜他们父容器中的.formTable之前还有其他一些元素吗？这就是为什么每个第二个表都符合规则，#dynTable1匹配，因为它是#divDynamic1的第一个孩子。

编辑：既然我明白了你想要实现的目标，我可以建议这样的事情：

.wrapper > div > .formTable { background-color: #ccc; } .wrapper > div:nth-child(odd) > .formTable:nth-child(odd) { background-color: #eeb; } .wrapper > div:nth-child(even) > .formTable:nth-child(even) { background-color: #eeb; }

它的作用是重置div内表格的背景颜色，然后为其中的表格指定新的交替规则 - 如果div是偶数子项则从灰色开始，并且黄色如果是一个奇怪的孩子。

Answer 2

您定位的是所有.formTable。甚至是#divDynamic1中的那些。（以及odd定位第一，第三，第五个e.t.c元素，这就是为什么#divDynamic1中的第一个表被定位的原因

尝试使用包装器指定您只想要定位子项：

.wrapper > .formTable:nth-child(odd)
{
    background-color: #eeb;
}

以下是fiddle。

使用nth-child（奇数）似乎没有像我期望的那样表现

2 个答案: