问题
I want to select spans that are not the descendants of a specific class, let's call it "no". Here's my CSS:
div:not(.no) span{background-color:#00f;}
Here's the HTML
<div>
<span>yes 1</span>
</div>
<div class="no">
<span>no 1</span>
</div>
<div class="no">
<div>
<span>no 2</span>
</div>
</div>
Two questions:
- Why does my CSS apply to both yes 1 and no 2?
Why does the whole thing break if I switch to a universal selector?
*:not(.no) span{background-color:#00f;}
Here's the code in JSFiddle: http://jsfiddle.net/stephaniehobson/JtNZm/
回答1:
Both of the
span
elements' parentdiv
elements don't have the classno
, regardless of whether any other ancestors do have it or not:<div> <!-- This is div:not(.no), pretty much a given --> <span>yes 1</span> </div>
<div class="no"> <!-- In this case, although this is div.no... --> <div> <!-- ... this is div:not(.no)! --> <span>no 2</span> </div> </div>
Both
html
andbody
, which are ancestors of yourdiv
andspan
elements, satisfy*:not(.no)
when using a universal selector (or rather, when omitting a type selector). This causes all of yourspan
elements to have the background color.
One solution to this is to anchor your negation filter to the body
element using the child combinator, if your top-level div
elements will always be children of body
:
body > div:not(.no) span { background-color: #00f; }
jsFiddle demo
Another solution is to simply use override styles.
回答2:
BoltClock is correct. It might make more sense if you phrase the selector like this:
Select any
span
element
that is descended from adiv
element
whoseclass
value does not contain the wordno
.
Each of the selected span
s in your example is in fact descended from a div
whose class
value does not contain the word no
—the fact that the second of them is also descended from a div
whose class
value does contain the word no
doesn’t negate (ha!) the previous statement.
What’s interesting is I would wager that if you moved the second no
down a level, the second span
would still be matched. CSS doesn’t have a notion of element proximity, so any ancestor div
should suffice to match the selector, regardless of whether it’s “closer” to the span
or not.
回答3:
I think the best choice is to split your statement into 2:
div span { background-color:#00f; }
.no span { background-color:#fff; }
You can see the effect here: http://jsfiddle.net/JHTqp/
来源:https://stackoverflow.com/questions/8540708/why-doesnt-this-css-not-declaration-filter-down