使用：而不是CSS選擇器

Question

我想用藍色為我的所有p着色，除了無色div內的那個。

我試過p:not(.no-color) :not(.no-color) p ， div:not(.no-color) p但我覺得我誤解了一些東西

 p:not(.no-color) { color: blue; } 

 <div class="container"> <p>Lorem ipsum</p> <div class="no-color"><p>Lorem ipsum</p></div> <p>Lorem ipsum</p> <div class="random-class"><p>Lorem ipsum</p></div> </div> 

編輯：自動檢索HTML代碼，因此我無法選擇應用這些類的元素。 我只能在CSS中進行樣式化。

Answer 1

如果你不能修改HTML，你可以使用這樣的東西：

 .container > p, .container > div:not(.no-color) > p { color: blue; } 

 <div class="container"> <p>Lorem ipsum</p> <div class="no-color"> <p>Lorem ipsum</p> </div> <p>Lorem ipsum</p> <div class="random-class"> <p>Lorem ipsum</p> </div> </div> 

Answer 2

此選擇器應該可以工作，而無需修改HTML：

 :not(.no-color) > p { color: blue; } 

 <div class="container"> <p>Lorem ipsum</p> <div class="no-color"><p>Lorem ipsum</p></div> <p>Lorem ipsum</p> <div class="random-class"><p>Lorem ipsum</p></div> </div> 

（對不起我之前的，無益的答案......我實際測試了這個！）

編輯：修正了答案

Answer 3

我會將課程放在<p> ，然后p:not(.no-color)會起作用。

但是，如果不能更改HTML結構，則可以使用.no-color p選擇器將<p> s作為具有.no-color類的元素的后代，然后將顏色設置為inherit 。

將顏色設置為inherit允許您獲取封閉父級的顏色而不指定它。

此技術適用於.no-color父級下面的任意嵌套<p>元素。

 p { color: blue; } .no-color p { color: inherit; } 

 <p>Lorem ipsum</p> <div class="no-color"> <p>Lorem ipsum</p> </div> <p>Lorem ipsum</p> <div class="no-color"> <div> <p>Lorem ipsum</p> </div> </div>