Cascading CSS, bottom-up Cascading
I'm confused with the way CSS is cascading, I thought if you did something like
<!DOCTYPE html 开发者_运维技巧PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.small p {
color: red;
font-size: 10px;
}
.big p {
color: green;
font-size: 50px;
}
.blue p {
color: blue;
}
</style>
<title>Insert title here</title>
</head>
<body>
<div class="small">
<p>Small</p>
<div class="big">
<p>Big</p>
<div class="small">
<div class="blue">
<p>Blue inside Small</p>
</div>
</div>
</div>
</div>
</body>
</html>
My problem is with the "Blue inside Small" , I thought this will be small text as it has an upper class with "small" class. How can I achieve that.
Please don't tell me to change any thing because I'm building a complex template system that you can have containers(divs) inside containers(divs) and I want the bottom-up style to apply !
You specified .big p's rule after .small p's rule in your CSS, so the font size will be 50 pixels, not 10, because both selectors are of equal specificity.
CSS cascades its equally-specific selectors top-down (for both CSS rules and the DOM). You can't change that unless you do any of these:
- Make one or more selectors more specific
- Use
!important - Modify your HTML
I know you said not to suggest any changes, but I'll do it anyway for the benefit of others — the simplest to make to achieve what you want would be to use the child combinator > in the second selector (as suggested by a now-deleted answer):
.big > p {
color: green;
font-size: 50px;
}
加载中,请稍侯......
精彩评论