CSS inheriting oddities
I run into this a lot and it's fairly annoying. Does anyone know about this:
#开发者_JS百科content h5 {
color:red;
}
#next h5 {
color:blue;
}
When the markup looks like this:
<div id="content>
<h5>RED</h5>
<div id="next">
<h5>BLUE</h5>
</div>
</div>
The blue h5 will actually appear red, what gives?!
I had no problems with it. You do have a quote mark missing after content though. Below is what I tested with
<html>
<head>
<style>
#content h5 {
color:red;
}
#next h5 {
color:blue;
}
</style>
</head>
<body>
<div id="content">
<h5>RED</h5>
<div id="next">
<h5>BLUE</h5>
</div>
</div>
</body>
</html>
No, it won't.
That's because of what is known as CSS Specificity, here is a good tutorial about it:
Specifics On CSS Specificity
加载中,请稍侯......
精彩评论