1

ページのセクションに適用したい CSS ルールが数十ありますが、この部分は簡単です。

.generalStyles a,p,button,div.foo {
  /* many styling rules here*/
}

ただし、ページのセクションを でマークすると、 (1)class="generalStyles"の子孫など、特定のサブセクションがそれらのスタイルを継承しないようにしたいと考えています。class="noGeneralStyles"これは、任意のネストで機能するはずです。

私が探しているのは、次のように変換できるセレクターです。

.generalStyles の子孫である場合は CSS ルールを継承しますが、.noGeneralStyles が近い親である場合は継承しません

インタラクティブな jsFiddle の例はここにあります

編集:ソリューション (存在する場合) は、内部 HTML を想定してはなりません

(1) - その理由は、リセットする CSS ルールが多すぎるためです

4

2 に答える 2

3

hereおよびhere:not()の理由により、セレクターのみを使用して継承チェーンを制限または制御することはできません。内の要素にオーバーライド ルールを提供する必要があります。.generalStyles .noGeneralStyles

于 2013-09-05T06:58:08.413 に答える
2

直接の子孫セレクターを使用するのはどうですか? クラスまたは要素の子であるタグ>を選択することを意味します。buttondirectnoGeneralStylesgeneralStyles

デモ

.noGeneralStyles > button {
    color: black;
}
.generalStyles > button {
    color: red;
}
于 2013-09-05T06:17:15.847 に答える