CSS: text-indent и text-align игнорируются

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. (Идентификатор 100 баллов, класс - 10, а элемент - 1).

Что касается решения, используйте одно из следующих действий, чтобы избежать конфликта специфики.

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

или ..

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

_{(Другие стили опущены краткости.)}

Последний пример, вероятно, что вы должны пойти с, потому что вы не хотите, чтобы все элементы абзаца с отступом, только те, которые являются потомками #excerpt. Я бы избегал использовать id в CSS, насколько это возможно, - сохранить их для JS.