複数のレベルの子孫にCSSセレクタを適用する方法を避けるには

Question

CSSが自分のスタイルを適用するのを防ぐには、クラスやIDを与えずに子孫の子孫にするのですか？例えば

#mycontent table {border: 1px solid red;} 

正しい表のスタイルを設定し、その中のすべての表も同様にスタイルを設定します。私が望むのは、すべてのサブタブではなく、最初に選択するテーブルだけです。すべての子テーブルが.mycontentでマークするべきではありません

table.mycontent {border: 1px solid red;} 

：

Answer 1

がカスケードではない、それは簡単なセレクタマッチングです。

いくつかの方法があります。

最初に、より具体的なセレクタを使用します。スタイルを設定する表が（孫や他の深い子孫ではなく）子である場合、子孫セレクターの代わりに子セレクターを使用できます。これは、ない第二は、あなたが実際に（IDまたはクラスとの）スタイルにしたいのテーブルに多くの情報を追加することですMSIE 6に

#mycontent > table { border: 1px solid red; } 

をサポートしています。

#mycontent table.tableThatIWantToStyle {} 

第3は、カスケードを使用して、より深い子孫のスタイルを変更することです。

あなたは、テーブル内のテーブルを持っているならば、オッズは、あなたがレイアウトのためにそれらを乱用しているということである、と述べ

#mycontent table { border: 1px solid red; } 
#mycontent table table { border: none; } 

- 間違っている - そしてあなたの代わりにあなたのマークアップを修正する必要があります。

Answer 2

は、あなたのテーブルにタイプ（クラス）を得ました。スタイルは親テーブルにのみ適用されます。

#mycontent > table {border: 1px solid red;} 

問題はIE6でサポートされていない子セレクタは次のとおりです。

Answer 3

あなたは子供セレクタを使用することができます。あなたはそのブラウザをサポートする必要がある場合には、より多くの不格好な何かをする必要があります：あなたは、このカスケード効果を得ることはありませんので、

#mycontent table {border: 1px solid red;} 
#mycontent table table {border: none;} 

別の方法としては、クラスを使用してテーブルを識別することができます。

あなただけの1つのHTMLテーブルタグのid「mycontent」を与え、次のようにCSSを書いていないのはなぜ

Answer 4

：あなたが記述何

 
table#mycontent { 
    border: 1px solid red; 
} 

Answer 5

私は同様のジレンマを抱えていましたが、ここで私はそれをどのように処理しましたか？私の解決策は、他の人が適切に一致させるために、より具体的なセレクタを使用することに関して投稿したものと似ています。

次のようにネストされたスパンがあり、スタイルをカスケードしたくないとします。言い換えれば

<span class="boldText"> 
    some bolded text 
    <span class="italicText">some italic text</span> 
</span> 

は、私はそれが「いくつかの太字テキスト一部斜体」ではなく「いくつかの太字テキストいくつかのイタリック体」（およびその逆）として表示します。ネストされた子に対してこれらのスタイルをクリアするように特定のセレクタを設定することにより、これは以下のように達成される。

span span { 
    font-weight:normal; /*clear bold style from 'cascading' by specifying it*/ 
    font-style:normal; /*clear italic style from 'cascading' by specifying it*/ 
} 
.boldText { 
    font-weight:bold; 
} 
.italicText { 
    font-style:italic; 
} 

「スパンスパン」セレクタは、ネストされたスパンが戻って「ノーマル」アンスタイルの状態にそれらを設定し、親のスパンから、通常のカスケード接続のスタイルを上書きするために必要なものに設定されたスタイルを持っていることを保証することができます。次に、スパン自体の特定のboldTextクラスまたはitalicTextクラスが適用され、より具体的なセレクタであるため、そのスパンの内容を太字または斜体（またはその両方）にします。

ここでの利便性は、子供にカスケードする親のフォント書式スタイルについて心配する必要がなくなったことです。適切な書式設定クラスを任意のスパンに追加するだけで、そのクラスのみを適用することができます。

".clearBold"クラスと ".clearItalic"クラスをネストしたすべてのスパンに簡単に追加できましたが、これはより洗練され、アプリケーションでコードが少なくなりました。