CSS選擇器用於變量，未知數量的「嵌套」元素

我試圖更改某種類型的所有元素（在該示例中爲<p>）的屬性，但具有特定元素的任何元素的直接子元素類（例如，test），通過使用:not()選擇器。CSS選擇器用於變量，未知數量的「嵌套」元素

我的問題是我不能在每個<p>元素都嵌套在不同數量的元素中時使其工作，如示例中所示。

我的問題主要歸結爲以下行通配符：

body * :not(.test) p {

這好像我需要一個通配符，它不僅代表了一個隨機元素，但隨機元素的數目不詳。 CSS中有這樣的東西嗎？（請注意，我不能在我的實際情況，以編輯HTML，或任何除了CSS）

JSFiddle Example（Foo應保持黑色）

body * :not(.test) p { 
 
    color: blue; 
 
}

<div> 
 
    <span> 
 
    <tr> 
 
     <span class="test"> 
 
     <p>Foo</p> 
 
     </span> 
 
    </tr> 
 
    <div> 
 
     <tr> 
 
     <li> 
 
      <p>Bar</p> 
 
     </li> 
 
     </tr> 
 
    </div> 
 
    <p>FooBar</p> 
 
    </span> 
 
</div>

來源

2017-04-15 Broodyr

嵌套是無效的HTML，它不會被任何CSS選擇器匹配，除非它是在DOM被分析後創建的。但是，如果你正在創造，那麼請不要。適當地使用''元素，並創建有效的HTML。 –

我試圖改變某種類型的所有元素的屬性（在本例中爲<p>），除了那些具有sp的任何元素的直接子元素（在示例中爲.test），通過使用:not()選擇器。

既然你談論的直接孩子，所有你需要補充的是子組合子（>）：

body * :not(.test) > p

您使用的是後裔組合子在您的原始代碼：

body * :not(.test) p

這將無法保持p.test的子項，因爲p也是其他（未排除）元素的後代，例如tr和body。所以:not(.test)嘗試失敗，因爲它只涵蓋幾種匹配可能性中的一種。

然而，當你從後代切換到只是孩子時，可能性縮小到在這種情況下只有一個匹配。

來源

2017-04-15 00:11:42

CSS選擇器用於變量，未知數量的「嵌套」元素

回答

相關問題