css - 階層に要素が含まれている場合に適用されない CSS セレクターは?

Question

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

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

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

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

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

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

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

.noGeneralStyles > button {
    color: black;
}
.generalStyles > button {
    color: red;
}

2 に答える 2