问连锁亲子
EN

Stack Overflow用户

提问于 2011-04-23 16:05:33

回答 1查看 336关注 0票数 0

我想所有的.box p颜色粉红色，但似乎所有的.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>

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-23 16:11:30

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

您的当前代码生成以下内容：JS Fiddle演示。

若要对此进行修改，使.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演示。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5765285

复制

相似问题

问连锁亲子
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问连锁亲子EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问连锁亲子
EN