Cascading Parent- Child
I want to have all .box p color pink but seems That all the .box p who are inside #container have red color. I hoped that cascade will change the color but I think I made a mistake.
Can you show me where I'm wrong please.
thanks
/_______________________________________________
<html>
<head>
<title> Buvbvn</title>
<style type="text/css">
p {color: #开发者_JS百科F00;}
/* container holds all visible page elements */
#container{
padding:20px;
border:20px solid #000;
background: #CCC;
}
.box{
margin: 10px;
padding:20px;
border: 1px solid #000;
}
/* Make text red only for paragraphs within the container */
#container p {
color: #F00;
}
/* Make text pink only for paragraphs within the box class */
.box p {
color: #FF00FF;
}
</style>
</head>
<body>
<div id ="container">
<p>This is our content area.</p>
<div class = "box">
<p >I'm in a box!</p>
</div>
<div class = "box">
<p >I'm also in a box!</p>
</div>
</div>
<div class = "box">
<p >I'm also in a box!</p>
</div>
</body>
The problem isn't the cascade, it's the specificity of the selectors. A selector based on an id is more specific than one based on a class.
Your current code produces this: JS Fiddle demo.
To amend that so that all paragraphs inside a .box are pink you can either remove the id from the selector, to have only p, or add the class to the selector, to give: #content .box p:
#container .box p, /* addresses those paragraphs inside a .box that's inside #container */
.box p { /* addresses those paragraphs inside a .box, but not necessarily the #container */
color: #FF00FF;
}
JS Fiddle demo.
Put this:
.box p {
color: #FF00FF !important;
}
I recommend:
p {
color: #F00; /* Red */
}
.box p {
color: #F0F; /* Pink */
}
加载中,请稍侯......
精彩评论