CSS：文本缩进和文本对齐被忽略

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。

正如您所看到的，我尝试将文本居中并将段落的缩进值设置为0以使用章节类以及版权声明中的文本。但它不起作用。 如果我直接应用该样式的段落在HTML文件中，如：

<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's - 将这些保存为JS。