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>

私にとって意味をなさないのは、セレクターが、およびFirefox と IE9nth-childに対してキーになることです (私は他のものを試しませんでした)。スタイルが適用されていないことを期待していました。明らかに、どのように機能するかについての私の理解が不足していますが、私の Google-fu は の使用方法の多くの例を発見しましたが、この種の場合にどのように機能するかについての簡単な説明を見つけるのは困難でした. だから、私はSOに目を向けます。table2table4dynTable1dynTable1nth-childnth-child

がこのように動作するのはなぜですか? class の要素nth-child間で厳密に交互にするにはどうすればよいですか?tableformTable

4

2 に答える 2

2

:nth-child(odd)子ではなく、独自の親 container の1 番目、3 番目、5 番目などの子である要素に適用されます。.formTable親コンテナーの s の前に他の要素がいくつかあると思いますか? そのため、2 つおきのテーブルがルールに#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;
}
​

s内のテーブルの背景色をリセットし、その中のテーブルにdiv新しい交替規則を指定します -divが偶数の子の場合は灰色から始まり、奇数の子の場合は黄色から始まります。

于 2012-06-29T14:53:24.667 に答える
2

すべてをターゲットにしています.formTable。のものでさえ#divDynamic1。(そしてodd、1 番目、3 番目、5 番目などの要素を対象とするため、最初のテーブル#divDynamic1が対象となります)

ラッパーを使用して、子のみをターゲットにするように指定してみてください。

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

ここにフィドルがあります。

于 2012-06-29T14:53:28.673 に答える