1 
<div id="main-content">
  <div>
    <div>target me
         <div>don't target me</div>
    </div>
  </div>
  <div>
    <div>target me too
         <div>don't target me</div>
    </div>
  </div>
</div>

私はこれを試しました：

#main-content div>div {

}

しかし、これはまた、「私をターゲットにしないでください」と言っているdivをターゲットにします。私はそれらのdivをターゲットにしたくありません。

もちろん、IDやクラスを使用することもできますが、重要なのは、すべての人に一般的なルールを宣言することです。

ご意見をお聞かせください。

4

3 に答える 3

5

セレクターを少し改良して、階層を強制します。#main-content > div > div

http://jsfiddle.net/zXaLU/

注意として、構造セレクターを使用する場合は、非ジェネリック タグを参照すると便利です。

例:#main-content > NAV > ULよりも意味があります#main-content > DIV > DIV

于 2012-08-30T15:53:34.603 に答える
1

2つのdivの外側にのみスタイルを適用する場合は、2つのスタイル定義を使用する必要があります。1つ目は、対象となるdivのスタイルを設定し、2つ目は対象とならない内部divのスタイルを設定します。

#main-content div>div {
  /* set some styles */
}
#main-content div>div>div {
  /* reset the styles defined before */
}

一般に、内部div（ターゲットではない）はその親divのすべてのスタイルを継承するため、その効果を無効にするには、これらすべてのスタイルを再度明示的にリセットする必要があります。

編集

すべてのコメントの後：「ターゲティング」に通常のCSS継承が含まれていない場合は、TimMedoraの回答の方が適しています。私の答えは、継承も説明しようとしました。

于 2012-08-30T15:52:03.690 に答える
0

どのように[指定された]要素を適切に選択しますか?

「適切な」方法は、選択したいアイテムに、ステータスを示すクラスを与えることです。

<div id="main-content">
  <div>
    <div class="someclass">target me
         <div>don't target me</div>
    </div>
  </div>
  <div>
    <div class="someclass">target me too
         <div>don't target me</div>
    </div>
  </div>
</div>

...そして、classセレクターを簡単に使用できます。

.someclass {
    ...styles...
}

ただし、マークアップを変更できない場合でも、子セレクターチェーンを使用できます。

#main-content > div > div {
    ...styles...
}
于 2012-08-30T15:54:24.470 に答える