基於祖先沒有類的CSS選擇器

Question

我想根據祖先不存在的另一個類來設置一個類的樣式。

 div:not(.evil-class) .element { background-color: green; }

 <div class="evil-class"> <div class="element">An element within the evil class</div> </div> <div class="element">An element NOT in the evil class</div>

不確定為什么不起作用？

我知道我可以做相反的事情。 對兩個元素都應用樣式，然后覆蓋該樣式，但是我不願意這樣做，因為我將覆蓋可能在第三方庫中更改的樣式。

謝謝。

Answer 1

div:not(.evil-class) .element的意思是“與從一個div走下類元件的東西不具有類惡級 ”

您的元素不是從任何 div派生的，因此div:not(.evil-class)與任何祖先都不匹配（在這種情況下，它們僅是<body>和<html> ）。

當前尚無法在CSS中表達“沒有一個祖先有特定的類”。

選擇器4級建議允許:not()包含復雜的選擇器，因此將來您可以執行以下操作：

 .element:not(div.evil-class *) { background-color: green; }

 <div class="evil-class"> <div class="element">An element within the evil class</div> </div> <div class="element">An element NOT in the evil class</div>

目前幾乎不存在瀏覽器支持，但是上面的演示在當前版本的Safari中有效。

基於祖先沒有類的CSS選擇器

問題描述

1 個解決方案

解決方案1
5 已采納 2019-01-23 16:47:42

基於祖先沒有類的CSS選擇器

問題描述

1 個解決方案

解決方案1 5 已采納 2019-01-23 16:47:42

解決方案1
5 已采納 2019-01-23 16:47:42