：不是选择器不适用于嵌套元素

Question

我对来自RTE的用户生成内容有特殊的样式。我通过RTE中的标签在用户生成的内容中插入了一些自定义组件。这些组件应该有完全不同的样式，不应该继承用户内容样式。

我试图用:not css选择器来实现这一点，如下面的代码片段所示。这适用于一个班级的第一个孩子，插入:not，但不适用于其子女。第三个'你好'不应该收到红色造型（如我所想），但它确实。难道我做错了什么？它预期的行为？我怎样才能实现我所追求的目标？

.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

你:not条件得到满足为true您class="wrapper"元素，因为它们与component类。使用: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>