Question

我希望所有的.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>

Answer 1

问题不在于级联，而是选择器的特异性。基于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

Answer 2

把这个：

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

Answer 3

我建议：

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

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

级联亲子

3 个答案: