Старшинство правил CSS

Question

Я видел:

• CSS 2, precedence of stylesheets imported using link element
• In which order do CSS stylesheets override?
• stylesheet - Can one CSS file take priority over another CSS file?

Они все, кажется, говорят, что для того же селектора происходит несколько раз, последний из которых выигрывает. Однако это не то, что происходит для меня. Поэтому, учитывая, что "Aqua.css" имеет:

body {color:aqua;} 

И "Red.css" имеет:

body {color:red;} 

Затем, используя следующее:

<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/> 
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/> 
<style type="text/css"> 
body {color: lime;} 
body {color: yellow;} 
</style> 

Последний, желтый, используется, как говорят другие ответы. Если я изменю это, то на:

<style type="text/css"> 
body {color: lime;} 
body {color: yellow;} 
</style> 
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/> 
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/> 

Затем используется Аква, а не последний, красный. См. Precedence of CSS rules Sample 2. Цвет тела - Aqua, но Aqua.css - до Red.css. Все ответы, которые я нахожу, говорят, что цвет тела будет красным.

Всякий раз, когда у меня есть несколько ссылок на CSS стилей и той лишь разницей, среди них есть цвет чего-либо (элемент или класс, или любой другой), то используется первый таблицы стилей, а не последний, но это, кажется, не быть тем, что все, что я читаю, должно случиться. Я пробовал Edge, Chrome и IE; Я не вижу существенной разницы между ними.

Поэтому у меня есть следующие два вопроса:

• Я правильно, что поведение я вижу (первая ссылка тега используется вместо последнего) отличается от других ответов?
• Если да, то почему?

Прошу прощения, если бы я опубликовал ответ на один из других потоков, но я думаю, что для создания нового вопроса более чисто.

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

Answer 1

_{Отказ от ответственности: Мой старый ответ и линия мышления были совершенно неправильными, поэтому я удалил его и разместил это как замену, чтобы не путать с каким-либо из предыдущих обсуждений.}

Когда вы даете элемент <link> атрибут title, вы определяете его как альтернативный набор таблиц стилей.

<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/> 
                 ^^^^^^^^^^^^ 
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/> 
                 ^^^^^^^^^^^ 

Превосходство стилей было красной селедкой.Стили Red.css никогда не применялись вообще, потому что этот набор таблиц стилей в настоящий момент неактивен.

Per the spec:

Кроме того, название атрибута имеет специальную семантику на этом элементе: Название канала связи; альтернативное имя набора стилей.

Также стоит читать: "CSS: alternative style sheets":

документ не должен иметь один таблицу стилей. Вы можете дать ему стиль по умолчанию и любое количество альтернатив для читателя на выбор. На этой странице, например, есть альтернативы всем стилям ядра W3C, а также две таблицы стилей, найденные в других местах в Интернете (автор: Дэвид Барон).

Как читатель может выбрать альтернативы, зависит от браузера. Не все браузеры пока предлагают меню для этого, но многие это делают. Например, в Opera, Internet Explorer и Firefox вы можете найти стили в меню «Вид». Начиная с 2012 года Chrome требует расширения (например, Decklin Foster's Style Chooser).

Вы предполагается использовать rel="alternative stylesheet" при определении альтернативных таблиц стилей, но это, кажется, случай, когда браузер предвестником поведение. Удалите атрибуты title, а элементы <link> вернутся к стандартному поведению, как определено в спецификации.