CSS選擇器除粒子類中的那些元素外的每個元素

我試圖選擇除其中一個子元素之外的包裝器中的每個元素。試想一下：CSS選擇器除粒子類中的那些元素外的每個元素

<div class="wrapper"> 
    <div class="this"> 
     <div class="that"></div> 
    </div> 
    <div class="foo"> 
     <div class="bar"></div> 
     <div class="orange"> 
      <div class="ignore"></div> 
     </div> 
    </div> 
    <div class="hello"></div> 
    <div class="world"> 
     <div class="ignore"> 
      <div class="this"></div> 
     </div> 
    </div> 
</div>

我想要做的就是把一切文本顏色裏面wrapper白色，只是在裏面ignore的元素。我到目前爲止是.wrapper *:not(.ignore *)，這是行不通的。

編輯：我不能接受的解決方案，包括覆蓋.ignore內的顏色，因爲該顏色是預先設定的，並且超出了我的控制範圍。也不可能知道在預設中使用了哪種顏色。想象一下body {color:blue;}，只有在我的情況下，不可能知道它是什麼顏色。

來源

2016-12-15 Mike Feng

剛剛成立的'.wrapper'然後設置顏色'color'爲'.ignore'。即'.wrapper {color：red; } .wrapper .ignore {color：blue; }'。這不行嗎？ – zgood

如果你把他們在正確的順序，你可以得到這樣的：

.wrapper { 
 
    background: green; 
 
} 
 
.wrapper *:not(.ignore) { 
 
    color: white; 
 
} 
 
.wrapper *, .wrapper .ignore *{ 
 
    color: red; 
 
}

<div class="wrapper"> 
 
    <div class="this"> 
 
     <div class="that">1</div> 
 
    </div> 
 
    <div class="foo"> 
 
     <div class="bar">2</div> 
 
     <div class="orange"> 
 
      <div class="ignore">3</div> 
 
     </div> 
 
    </div> 
 
    <div class="hello"></div> 
 
    <div class="world"> 
 
     <div class="ignore"> 
 
      <div class="this">4</div> 
 
     </div> 
 
    </div> 
 
</div>

注意:not(...)應用於當前元素，所以你不能使用:not(something [some element inside])

來源

2016-12-15 18:08:42 Dekel

我不能使用'.wrapper *，.wrapper .ignore * {color：red;}'，因爲顏色實際上已經預先設置好了（該部分是未知的，並且超出了我的控制範圍）。我無法知道預設的顏色是什麼，所以我不能像這樣覆蓋它。 –

你想要將白色應用於'div.ignore'和'div.ignore'的孩子嗎？ – Dekel

不，白色應用於'.wrapper'內的所有內容*除了'.ignore'裏面的元素。 –

我會建議：

.wrapper div:not(.ignore) { 
    color: white; 
}

您發佈的CSS選擇器不工作–和不應該期望工作–的原因是因爲：

.wrapper *:not(.ignore *)

試圖選擇不在的後裔所有後代元素.ignore元素，而在你的問題中，你似乎只想選擇不屬於.ignore類的元素。

此外，:not()僞類：

...是一個函數表示法服用簡單選擇（不包括否定僞類本身）作爲參數。它代表了一個沒有被其參數表示的元素。

[重點 mmine，https://www.w3.org/TR/css3-selectors/#negation]。

和A '簡單選擇' 是：

...任一個類型選擇器，通用選擇，屬性選擇器，類選擇，ID選擇，或僞類。

[https://www.w3.org/TR/css3-selectors/#simple-selectors-dfn]

出現，以防止使用一個組合子的，白色空間，較後代的選擇;這意味着您的選擇器.ignore *是否定的無效選擇器（:not()）僞類。

來源

2016-12-15 18:10:06

不，我實際上是指所有後代，因此「內的每個元素」都是。 –

添加color: #fff到.wrapper

然後，添加任何顏色你想.ignore

之後，確保.ignore加載後.wrapper在樣式表。

.wrapper { 
 
    background: #131418; 
 
    color: #fff; 
 
    font-size: 25px 
 
} 
 
.ignore { 
 
    color: #933 
 
}

<div class="wrapper"> 
 
    <div class="this"> 
 
    <div class="that">wrapper</div> 
 
    </div> 
 
    <div class="foo"> 
 
    <div class="bar">wrapper</div> 
 
    <div class="orange"> 
 
     <div class="ignore">ignore</div> 
 
    </div> 
 
    </div> 
 
    <div class="hello">wrapper</div> 
 
    <div class="world"> 
 
    <div class="ignore"> 
 
     <div class="this">ignore</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-15 18:10:09

不能使用涉及覆蓋'.ignore'的任何解決方案 –

將在類的頂部使用ID是一個選項嗎？ – 2016-12-16 19:35:41

你是什麼意思？ '.wrapper'和'.ignore'中有近百個元素，不確定是否可以識別所有元素。 –

純CSS似乎並沒有提供良好的解決方案 - 至少不是一個我能想到的。

not的問題是它只能應用於「簡單的選擇器」，這基本上意味着它適用的選擇器不能包含像空白這樣的組合器。

對於簡單的情況，你可以做很多人的建議 - 只要有第二個規則選擇.ignore *並撤消你的規則所做的事情。但是，如果.wrapper *規則做了很多事情，或者如果沒有.wrapper *規則而得到的確切狀態不清楚（可能由外部資源設置），那麼這不一定實用。

你可以做的是使用JavaScript（或類似）向下傳播.IGNORE類其所有後代，那麼就使用:not(.ignore)

來源

2016-12-15 18:16:19

CSS選擇器除粒子類中的那些元素外的每個元素

回答

相關問題