：セレクタがネストされた要素に対して機能しない

Question

私は、RTEに由来するユーザ生成コンテンツ用の特別なスタイルを持っています。また、RTEのタグを使用して、ユーザーが生成したコンテンツにカスタムコンポーネントを挿入しました。これらのコンポーネントは完全に異なるスタイルを持ち、ユーザーのコンテンツスタイルを継承するべきではありません。

私はこれを達成するために、:not以下のスニペットに示すようなCSSセレクタを使用しています。これは、:notに挿入されたクラスの1番目の子には適用されますが、子には適用されません。 3番目の「こんにちは」は赤い色のスタイリング（私が思う）を受け取るべきではありませんが、それはあります。私は何か間違っているのですか？それは期待される行動ですか？どのように私は後に何を達成することができますか？

.user-content :not(.component) p { 
 
    color: red; 
 
    font-size: 50px; 
 
}

<!-- Styled user-content inside some wrapper --> 
 
<div class="user-content"> 
 
    <div class="wrapper"> 
 
    <p>Hello!</p> 
 
    </div> 
 
</div> 
 

 
<!-- A component inside user-content should be unstyled --> 
 
<div class="user-content"> 
 
    <dov class="component"> 
 
    <p>Hello!</p> 
 
    </dov> 
 
</div> 
 

 
<!-- But nested elements of a component still recieve styling --> 
 
<div class="user-content"> 
 
    <div class="component"> 
 
    <div class="wrapper"> 
 
     <p>Hello!</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

彼らはcomponentクラスではありませんので、ご:not条件は、あなたのclass="wrapper"要素のためのtrueとして成立しています。 :notを使用すると、親子関係なしに、seperatly各要素に適用されます。

<div class="user-content"> 
    <div class="component">  :not(.component) is false 
    <div class="wrapper">  :not(.component) is true, so rule applies. 
     <p>Hello!</p> 
    </div> 
    </div> 
</div> 

を親子関係を作成するには、自分のルールで>を使用します。

.user-content > :not(.component) p 

Answer 2

あなたのセレクタは、正しい結果を得ています、あなたは期待どおりの結果を得るために>の代わりにスペースを使用する必要が.user-content > :not(.component) p

.user-content > :not(.component) p { 
 
    color: red; 
 
    font-size: 50px; 
 
}

<!-- Styled user-content inside some wrapper --> 
 
<div class="user-content"> 
 
    <div class="wrapper"> 
 
    <p>Hello!</p> 
 
    </div> 
 
</div> 
 

 
<!-- A component inside user-content should be unstyled --> 
 
<div class="user-content"> 
 
    <dov class="component"> 
 
    <p>Hello!</p> 
 
    </dov> 
 
</div> 
 

 
<!-- But nested elements of a component still recieve styling --> 
 
<div class="user-content"> 
 
    <div class="component"> 
 
    <div class="wrapper"> 
 
     <p>Hello!</p> 
 
    </div> 
 
    </div> 
 
</div>