Правила приоритета CSS

Question

Насколько я понимаю, существует 3 типа таблицы стилей:

• Определяется автором страницы
• Определяется пользователем (то есть набор стилей по умолчанию, определенных пользователем и установленных в их браузере)
• Таблица стилей по умолчанию, определенная браузером

Согласно этой книге , если элемент не соответствует селектору ни в одной из этих таблиц стилей, только тогда значение свойства будет унаследовано от родительских элементов. Однако в книге также говорится, что таблица стилей по умолчанию в браузере должна определять стиль для всех типов элементов.

Если в таблице стилей браузера определен стиль для всех типов элементов, и этот стиль имеет более высокий приоритет, чем наследование, то наследуемые значения свойств никогда не должны соблюдаться. Ясно, что это не так, так каковы правильные правила приоритета для свойств, определенных в таблице стилей браузера по умолчанию, и для родительских элементов? (Я знаю, что не все свойства CSS унаследованы, но ради этого обсуждения предположим, что я имею в виду свойство, например, color)

Заранее спасибо, Дон

Answer 1

Браузер не определяет стиль для всех элементов, только определенных. Упрощенная внутренняя таблица стилей браузера может выглядеть следующим образом:

a { color: blue; border-bottom: 1px solid blue }
p { margin-bottom: 1em; }
blockquote { margin: 0 5em 1em 5em; }

Возьмем следующий фрагмент HTML в качестве примера:

<ul>
  <li>
    <span>Blah blah blah.</span>
  </li>
  <li>
    <a href="about:">Foo</a>
  </li>
</ul>

Когда браузер выполняет рендеринг элемента <span>, он просматривает все таблицы стилей (браузер, автор и пользователь) на соответствие правилам и выясняет, какой из них является наиболее важным . В этом примере таблица стилей автора содержит одно правило:

ul { color: Green; }

Внутренняя таблица стилей вашего браузера не задает значение color для span, поэтому она перемещается вверх по дереву документа, пока не найдет то, что действительно имеет определенное правило color, в этом кейс ul.

С другой стороны, когда браузер отображает элемент <a>, он не находит ничего в таблицах стилей пользователя или автора, указывающих color, поэтому он использует правило, найденное в таблице стилей браузера.

Конечный результат: зеленый текст, синяя ссылка.

Информация о бонусе : Если вы используете Firefox, вы можете просмотреть (один из) его внутренних CSS-файлов, вставив resource://gre/res/html.css в адресную строку. (Кажется, прямая гиперссылка смущает движок уценки SO)

Answer 2

Ты прав. Есть три источника стилей. Сначала идут стили браузера, затем стили пользователя (читателя) и, наконец, стили автора; Авторские стили обычно превосходят пользовательские стили. Все, что определено в таблице стилей по умолчанию в браузере, будет переопределено, если стиль будет определен позже в каскадном режиме (в таблице стилей пользователя или автора), который на него влияет. Если есть что-то, что должно быть унаследовано из-за стиля, написанного автором, тогда он переопределяет стили по умолчанию, так как это было определено позже в каскадировании.

Перейдите здесь для получения дополнительной информации о каскадировании.

Answer 3

Возможно, вы захотите посмотреть на «Специфичность» также

http://htmldog.com/guides/cssadvanced/specificity/

Answer 4

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

Лист браузера
a { color: blue }

Страница автора
div { color: green }

HTML
<div><a href="#">This is a link</a></div>

Как и следовало ожидать, ссылка будет синей, а не зеленой, потому что правило браузера более конкретное. Это не имеет ничего общего с наследованием, потому что ссылка никогда не имеет возможности наследовать. Приоритет для потоков стиля элемента:

1. встроенный стиль; Вы не можете получить более конкретную информацию, чем эта, и это превосходит все (возможное исключение, если! важный существует в соответствующем правиле)
2. Самый специфический селектор (расположен где угодно); будет применен селектор с наивысшей специфичностью, независимо от того, где он находится в структуре наследования, как описано Робом Алленом в этой теме
3. Селектор, который был применен последним, затем анализирует дерево наследования (теги стилей в документе => авторский лист => пользовательский лист => лист браузера; обратите внимание, что в некоторых случаях пользовательский лист может отменять авторский лист, но обычно автор окончательный)
4. Стиль родителя для свойства (или, если у родителя нет требуемого свойства, в DOM); очевидно не все свойства наследуются

Основная причина того, что стили браузера не препятствуют наследованию родительских стилей, заключается в том, что стили браузера, как правило, очень разрежены и определяют такие вещи, как цвет, размер шрифта и т. Д. Настолько высоко, насколько это возможно, в дереве DOM, чтобы сделать их проще. переопределить. Если бы у вас был браузер, который определил, скажем, цвет для элементов span, то вы могли бы столкнуться с проблемами, пытаясь получить универсальный цвет div для наследования.

Answer 5

Наследование стилей элементов от своих родителей может происходить двумя способами. Во-первых, хотя браузеры могут определять свойства стиля для каждого элемента, они, как правило, делают это не полностью. Так, например, элемент «p» обычно имеет верхнее поле по умолчанию (среди прочих), но не определяет стиль шрифта, так что при отсутствии правил автора или пользователя он будет наследоваться от его родителя. Во-вторых, в некоторых местах в CSS можно использовать явное значение «наследовать», чтобы дать рендереру команду принять это свойство стиля от его родителя. Раньше это было необходимо в некоторых местах IE (я думаю, ячеек таблицы), и продолжает действовать так же при переопределении более ранних правил в каскаде.

Answer 6

Игнорирование встроенных стилей, которые отменяют все, если к элементу страницы применимы несколько классов / селекторов, победит тот, который определен последним (поскольку стили браузера определяются первыми, они обычно перезаписываются). Предупреждение возникает, когда есть класс / селектор, который детализирует все уровни иерархии.

Вот пример листа:

    <style type="text/css">
        #content
        {
            width: auto;
        }

        #content DIV.special
        {
            width: 200px;
            background: #999999;
            border: 2px dotted #000000;
        }

        #content DIV
        {
             width: 300px;
             border: 1px solid #CCCCCC;
        }



    </style>

С учетом следующего HTML:

        <div id="content">
            <div class="special">
                should render 200px wide with a gray background and a dotted border
            </div>
            <div>
               should render 300px wide with a 1pt border
            </div>
        </div>   

Затем, если вы добавите этот стиль внизу листа:

    DIV
    {
        background: #CC9999;
    }

Вы превратите все в светло-фиолетовый (поскольку это последний DIV со значением цвета), за исключением div с классом .special (потому что он более конкретен).

Надеюсь, это поможет.