级联亲子

时间:2011-04-23 16:05:33

标签: css

我希望所有的.box p颜色为粉红色,但似乎#container中的所有.box p都有红色。我希望级联会改变颜色,但我认为我犯了一个错误。

你能告诉我我错在哪里吗?

感谢

/ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ____

<html>
<head>
<title> Buvbvn</title>
<style type="text/css">
p {color: #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>

3 个答案:

答案 0 :(得分:3)

问题不在于级联,而是选择器的特异性。基于id的选择器比基于class的选择器更具体。

您当前的代码会生成:JS Fiddle demo

要对.box内的所有段落都是粉红色进行修改,您可以从选择器中移除id,只有p,或者将类添加到选择器,给:#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

答案 1 :(得分:0)

把这个:

.box p {
  color: #FF00FF !important;
}

答案 2 :(得分:0)

我建议:

p {
    color: #F00; /* Red */
}

.box p {
    color: #F0F; /* Pink */
}