Question

我的所有内容都包含一个主div（包装器着陆），并为所有<p>标签创建了段落样式（#wrapper-landing p）。我在<p>标签上创建了另一个类，但它没有采用那种风格。我刚刚展示了原始<p>代码的样式。

查看我的jsfiddle。我希望有不同的文字是：

了解我们的斯巴鲁如何帮助您管理道路

这是我的jsfiddle：http://jsfiddle.net/huskydawgs/k4hq8L7f/23/

这是我的代码：

<div id="wrapper-landing">
<p>
    Carter Subaru is your New and Used Subaru car sales headquarters. We also offer the Subaru auto maintenance and repair services that you need in Seattle.</p>
<div class="signup-box">
    <p>
        Find out how our Subaru can help you manage the road</p>
</div>
</div>

这是我的css：

#wrapper-landing {
    width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

#wrapper-landing p {
    color: rgb(102, 102, 102);
    font-family: Helvetica,Arial,sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
}

.signup-box {
    padding:0 12px; 
    color: #555555; 
    background-color: #F1F1F1; 
    border: #e2e3e4 2px solid
}

    .signup-box p {
        font-family:Helvetica, Arial;
        font-size:1em;
        font-weight:normal;
        color:#2251a4;
        margin: 0 0 2px 0;
        text-align: center;
    }

Answer 1

编辑：根据您最近的评论。

它仍然是一个优先问题。试试这个选择器：#wrapper-landing .signup-box p

Answer 2

CSS采用对您所指的元素最具体的样式。在这种情况下，#wrapper-landing p和.signup-box p具有相同的特异性级别，因此它从上到下接受样式和解析样式。这意味着首先应用#wrapper-landing p的样式，并且仅应用signup-box p规则中的不同css属性。

要专门应用signup-box p样式，您必须为其指定一个优先级高于#wrapper-landing p的选择器，以便您可以执行以下操作：

#wrapper-landing p.rtecenter{
  font-family:Helvetica, Arial;
  font-size:1em;
  font-weight:normal;
  color:#2251a4;
  margin: 0 0 2px 0;
  text-align: center;
}

要了解有关CSS特异性的更多信息，请查看以下链接：http://css-tricks.com/specifics-on-css-specificity/

如何在div中的段落样式下创建段落类

2 个答案: