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。