問題描述
我正在學習 :not() 偽類，但它沒有按預期工作.
我想將除 .mind 之外的所有文本都涂成紅色.出于某種原因，這并不能阻止 .mind 元素變紅.
:not(.mind) {紅色}<div class='parent'><div class='child'>一個</div><div class='child'>兩個</div><div class='child'>三個</div><div class='child'>一個</div><div class='child'>兩個</div><div class='child'>三個</div><div class='child'>一個</div><div class='mind'>mind</div><div class='child'>三個</div><div 類='孩子'><p>第一段</p></div></div>記住這一點:
:not() 等價于 *:not()
當 :not() 偽類前面沒有選擇器時，隱含一個通用選擇器:
測試此行為的快速方法是使用不可繼承的 border 屬性.
在下面的示例中，使用您的選擇器，您會注意到邊框沒有應用到 .mind，并且您的選擇器按預期工作:
:not(.mind) {紅色;邊框底部:1px 虛線黑色；}<div class='parent'><div class='child'>一個</div><div class='child'>兩個</div><div class='child'>三個</div><div class='child'>一個</div><div class='child'>兩個</div><div class='child'>三個</div><div class='child'>一個</div><div class='mind'>mind</div><div class='child'>三個</div><div 類='孩子'><p>第一段</p></div></div>為了您的特定目標:
<塊引用>我想將除 .mind 之外的所有文本都涂成紅色.
使用更具體的選擇器.
.parent >:沒關系) {紅色;}<div class='parent'><div class='child'>一個</div><div class='child'>兩個</div><div class='child'>三個</div><div class='child'>一個</div><div class='child'>兩個</div><div class='child'>三個</div><div class='child'>一個</div><div class='mind'>mind</div><div class='child'>三個</div><div 類='孩子'><p>第一段</p></div></div>I am learning about the :not() pseudo class and it is not working as expected.
I want to color all text red except for .mind. For some reason this is not preventing the .mind element from being red.
:not(.mind) {
color: red
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
Keep this in mind:
:not() is equivalent to *:not()
When there is no selector prefixing the :not() pseudo-class, a universal selector is implied:
6.2. Universal selector
If a universal selector represented by
*(i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the*may be omitted and the universal selector's presence implied.
Therefore, the rule you have:
:not(.mind) {
color: red
}
... is saying apply red color to all elements except the element with the class mind.
Okay, except in this case, the color property is inheritable, so even though the red doesn't get applied to the .mind element, it still gets the red through inheritance from the .parent element.
Here's what the browser is doing:
A quick way to test this behavior is with the border property, which is not inheritable.
In the example below, using your selector, you'll notice that the border doesn't get applied to .mind, and your selector works as you were expecting:
:not(.mind) {
color: red;
border-bottom: 1px dashed black;
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
To your particular objective:
I want to color all text red except for
.mind.
Use a more specific selector.
.parent > :not(.mind) {
color: red;
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
這篇關于CSS:不是偽類不起作用的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！