Styling with CSS2 when attr is not set
Styling an element with an attribute set is easy: E[attr]
.
Is there any way to style an element with CSS2 based on the absence of an attribute, something like this E[!attr]
? (JavaScript solution is not an option).
For example, there are several class rules followed by id rule:
.abc {padding:1em;}
.def {padding:2em;}
#n a {padding:0;}
The html code is:
<div id="n"><a href="" class="abc">.</开发者_Go百科a><a href="" class="def">.</a></div>
Classes abc
and def
have lowerer priority against id-ed rule so both a
have padding 0. I can't change the sequence of rules above, but I can change id-ed rule add my own rules. I want to avoid writing rules like #n a.abc
for every class (there're many). Instead I need something like #n a[!class]
to keep all class-ed a
s intact.
Sadly, not in CSS2. The best you can do is to cascade your declarations:
E {color: red}
E[attr] {color: blue}
But even this can't really be relied on, as IE6 doesn't honour attribute selectors.
In CSS3, though, there is the lovely ":not" pseudo selector (http://www.w3.org/TR/css3-selectors/#negation).
EDIT
Thanks for clarifying. How about:
.abc {padding:1em; !important} .def{padding:2em; !important}
#n a{padding: 1em}
I don't think this can be done in CSS2. In CSS3, you'd use the "not" syntax:
input:not([type="file"])
精彩评论