Question

我想这个问题的答案可能很简单，但我无法自己解决。

我有以下HTML：

<div id="excerpt">
    <p class="chapter">Chapter One</p>
    <p>Text</p>
    <div class="copyright-notice">
        <p>Copyright &copy; 2014 Name. All rights reserved.</p>
    </div>
    <!--end copyright-notice-->
</div>
<!--end excerpt-->

以及随后的CSS：

#excerpt {
    padding:20px;
    color:#000000;
}
#excerpt p {
    line-height:1.4em;
    text-indent:45px;
    text-align:justify;
}
p.chapter {
    text-align:center;
    text-indent:0;
    font-size:16pt;
    text-transform:uppercase;
}
.copyright-notice {
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999;
    margin:20px auto;
    padding:20px;
}
.copyright-notice p {
    display: block;
    color:#666666;
    text-align: center;
    text-indent:0;
}

JS Fiddle reproduction

<p style="text-align:center;text-indent:0;">text</p>

JS Fiddle reproduction

它会起作用。但是一旦我尝试通过CSS设置这些段落的样式，text-align和text-indent就会被忽略。

知道我做错了什么吗？谢谢你的帮助！

Answer 1

这只是一个specificity问题。

选择器#excerpt p比p.chapter更具体。因此text-indent:0未被应用。使用style属性时应用它的原因是因为内联CSS更具体。

更具体地说，（双关语），#excerpt p的特异性计算为101.而p.chapter的特异性为11.（id为100分，类为10，元素为是1）。

对于解决方案，请使用以下任一方法以避免特定冲突。

p {
    text-indent:45px;
}
p.chapter {
    text-indent:0;
}

或..

#excerpt p {
    text-indent:45px;
}
#excerpt p.chapter {
    text-indent:0;
}

_{（其他样式从简洁中省略。）}

后一个例子可能是你应该使用的，因为你不希望所有段落元素都缩进，只是那些是#excerpt的后代。我尽可能避免在CSS中使用id - 除了那些用于JS。

CSS：text-indent和text-align被忽略

1 个答案: