Важность иерархии стилей CSS.

Я выполнил некоторые поисковые запросы Google, и до сих пор я не нашел ничего, что могло бы ответить на мой вопрос о порядке или важности CSS.

Например, inline переопределяет внешний. Понял. Добавление! Важно внешне может переопределить inline. Кроме того, из всего, что я когда-либо преподавал, более поздние стили переопределяют более ранние стили. Итак:

h1 { font-size: 12pt; }
h1 { font-size: 14pt; }

отобразит размер шрифта 14pt. Но это не всегда так. Иногда я хочу определить такие стили, как:

<div id="content">
    <input class="regular" type="text" />
    <input class="regular" type="text" />
    <input class="long" type="text" />

а затем в css:

#content input { width: 50%; }
.long { width: 75%; }

но это не всегда работает. Где я могу увидеть порядок важности, потому что все они имеют определенные уровни важности:

input {} 
#content input {}
#content input.regular {}
#content input.long
input.regular {}
input.long {}
.regular {}
.long {}

Мне действительно не нравится писать! важно когда-либо, но если я не могу точно определить порядок важности, то иногда мне приходится менять идентификаторы, классы и т.д.

Ответы

Ответ 1

Термин, который вы хотите найти, - это "специфика".

Когда у вас есть два (или более) блока CSS, селектора которых выбирают один и тот же элемент и оба пытаются установить одно и то же свойство, тогда выигрывает блок с более конкретным селектором.

В селекторах CSS 3 подробно описывается, как должна быть рассчитана специфика, и ее разумно читаемая:

http://www.w3.org/TR/css3-selectors/#specificity

Также есть хорошие сообщения в блогах, которые также описывают правила:

(Обратите внимание, что, когда два блока имеют селекторы с одинаковой специфичностью, только тогда правило win блокируется, как в вашем примере с h1 s. Правило в блоке с более конкретным селектором будет переопределять используйте более поздний блок с менее конкретным селектором.)

Ответ 2

Вы испытываете специфику CSS. Если у вас есть два противоречивых стиля, которые применяются к одному и тому же элементу, есть система взвешивания, которая определяет, какой стиль выигрывает. Вы можете прочитать об этом здесь:

http://css-tricks.com/specifics-on-css-specificity/

Ответ 3

В этом случае вот что вы делаете

#content input { width: 50%; }
#content .long { width: 75%; }

выбор элемента с его идентификатором будет иметь приоритет, поэтому у вас возникла эта конкретная проблема. добавление идентификатора к вашему выбору и более конкретное решение проблемы

например:

#content input.long { width: 75%; }

еще более специфичен, чем

#content .long { width: 75%; }