html - 子要素にcssスタイルを適用しないでください

Question

我々は持っています

<div class="xTable">
 <table>
  <tr>
   <td>
    <div class="xTable">
     <table>
      <tr>
       <td>
        <div class="xTable">
         <table>...</table>
        </div>
       </td>
      </tr>
     </table>    
    </div>
   </td>
  </tr>
 </table>
</div>

カスタムcssスタイルを2番目のdivに適用し、2番目のdivにのみ適用し、1または3以上には適用しないようにするにはどうすればよいですか？

追加のクラスやIDを追加する方法はありません！HTMLは動的に生成され、管理できません。

私は使うだろう

.xTable table .xTable

ただし、3番目以降のdivが影響を受けることを意味します。

IDなし！CSSセレクターのみをお願いします。

ありがとう！

score 6 · Accepted Answer

このデフォルトのマークアップと、まだ指定されていない場所を正しく追加するブラウザの両方に完全に対応するには、tbody次を使用する必要があります。

body > .xTable > table > tr > td > .xTable,
body > .xTable > table > tbody > tr > td > .xTable {
    ...
}

JSFiddleの例。

<div class="xTable">これは、最初の親に。以外の親がいないことを前提としています<body>。そうでない場合はbody、親と交換してください。

score 2 · Accepted Answer

私はおそらく2番目のdivに追加のcssクラスを与えるでしょう。

<div class="xTable second-xTable-div"></div>

score 2 · Accepted Answer

セレクターを使用し:notて親を除外してから、子コンビネーターの長いリストを作成すると、次のような作業が可能になります。

:not(table) > .xTable > table > tr > td > .xTable

ただし、暗黙のtbody要素を混ぜる必要があるかもしれません。

より良い解決策はおそらく次のようになります：

.xTable .xTable {
    foo: bar;
}

.xTable .xTable .xTable {
    foo: Whatever it would have been if the previous selector didn't match
}

score 1 · Accepted Answer

それならこれはただではないかもしれません：

body > .xTable table tr td.xTable {STYLES}

????

score 1 · Accepted Answer

@Robが提供するクラス名を追加することはできないと言っているので、javascriptまたはjqueryを使用する方法は1つしかないと思います。以下に、jQueryを使用したソリューションを提供しました。

$('.xTable:eq(1)').css('backgroundColor','green'); //Selects the second .xTable class div

詳しくはこちらをご覧ください

score 0 · Accepted Answer

使用するときsomeelement someotherelementは、最初の要素をどれだけ深くするかは重要ではありません。ただし、>それらの間に追加して、このようsomeotherelementに正確に子であるものだけを選択することができます。最初のセレクターの子の子は選択されません。someelementsomeelement > someotherelement

score 0 · Accepted Answer

0

クラス構成をお勧めします。例えば<div class="table level-2" />

于 2013-03-20T14:17:19.457 に答える

html - 子要素にcssスタイルを適用しないでください

7 に答える 7

Related

Reference