：不是選擇器不適用於嵌套元素

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>