Combining a Class selector with an ID
I use the following css:
/* style.css */
#someId {
background-color: red;
}
#someId.medium {
width: 300px;
}
#someId.large {
width: 500px;
}
with the html:
<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>
and
<!-- large.html -->
<div id="someId" class="large">hello, world</div>
I know the above works fine on FireFox and Opera, and, it does not work on IE6 (surprise, surprise).
My questions are:
Is the above CSS correct according to the CSS-specifications (and where can I find this specific issue)?
What browsers (on what platform) do & do not support this?
Update:
The IDs are unique per page. I tried to communicate that by havingmedium.html and large.html but apparently it wasn't obvio开发者_Go百科us enough.
Update 2:
The code example above was just written to illustrate my question. It is not part of production code and it is not meant to be complete. In short, it is just an example to demonstrate a problem with a very specific solution.quirksmode have a table of which selector (among other things) browser supports. unfortunaltly, there is not test for combining selector. but as ie6 fail multiple classes it's not that surprising.
w3c css specification explains how css selector should works, there is a DIV.warningand E#myid which are not exactly like yours but suggest it should work (maybe it's explain in the page I didn't read it all ;) )
if you do not need "#someId" to be an id you can make it to a class ".someId" and then use the other two classes to extend where needed... like this class="someId medium" ect. Try this and see if it will work. Besides it`s a better solution anyway because you can not have two ids with the same name on one page.
.someId {
background-color: red;
}
.medium {
width: 300px;
}
.large {
width: 500px;
}
and then..
<div class="someId medium">hello, world</div>
or
<div class="someId large">hello, world</div>
Should be working! That's odd. Try flipping them over, as in .large#someId.
One thing you could try is being more verbose than you would like to be. Add to the class names like so:
<div id="someId" class="someId-medium">hello, world</div>
or
<div id="someId" class="someId-large">hello, world</div>
and then change your CSS to this:
#someId {
background-color: red;
}
.someId-medium {
width: 300px;
}
.someId-large {
width: 500px;
}
Crikey. I’ve never come across this one before, but you’re totally right. Your code should work as you’re expecting.
I’m pretty sure it’s only IE 6 that’ll have a problem with it.
Like some mentioned above, ID a unique identifier, thus should only be used once in a page. Normally, ID's would be used for major sections in your mark-up like #header, #content #footer, etc... for the rest, just use classes.
As for your text, change the #someId to .someId and then you can use .large or .medium since you can apply multiple classes to an element.
<div class="someId large">hello, world</div>
And your CSS would be
.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }
Also... if the text "Hello, World" is a title, I strongly suggest you use the proper elements (h1, h2, etc...) and tweak their styles rather than create new ones.
Hope this helps!
EDIT: For the comment below, here's a little HTML code that I've just tested out in IE6 and works. It works in FF and Opera as well so I'm assuming it works in Safari and Chrome too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.something { background-color: #ccc; }
.else { color: #090; }
</style>
</head>
<body>
<div class="something">This is just something</div>
<div class="else">This is just else</div>
<div class="something else">This is something else</div>
</body>
</html>
Not sure if dragging a Javascript library into the mix is possible in your application, but a lot of CSS that doesn't work well in IE6 is possible when using jQuery.
However, if you have no other use for a the 24kb jQuery library, it seems a hefty addon for a single CSS-attribute. Maybe you can go with graceful degradation?
加载中,请稍侯......
精彩评论