0

我有一块像这样的CSS：

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

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

<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选择器将针对table2,table4和dynTable1Firefox 和 IE9 （我没有尝试其他人）。我本来希望dynTable1不会将样式应用于它。显然，我对如何nth-child工作的理解不足，但是虽然我的 Google-fu 发现了许多如何使用的示例，但nth-child我很难找到一个简单的解释来解释它在这种情况下是如何工作的。所以，我转向SO。

为什么nth-child会有这样的行为，我怎样才能让它在tableclass 的元素之间严格交替formTable？

4

2 回答 2

2

:nth-child(odd)应用于它们自己的父容器的第 1、3、5 等子元素，而不是它们的子元素。我猜.formTable在它们的父容器中的 s 之前还有一些其他元素？这就是为什么每第二个表都匹配规则，并且#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;
}
​

它所做的是重置divs 中表格的背景颜色，然后为其中的表格指定新的交替规则 - 如果 s 是偶数子元素，则从灰色开始，div如果是奇数子元素，则从黄色开始。

于 2012-06-29T14:53:24.667 回答
2

您的目标是所有.formTable. 即使是#divDynamic1. （并odd针对第一个，第三个，第五个等元素，这就是为什么要针对第一个表#divDynamic1）

尝试使用包装器来指定您只想定位孩子：

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

这是给你的小提琴。

于 2012-06-29T14:53:28.673 回答