Порядок элемента ссылки (для внешнего css) и внутреннего css не должен иметь значения, не так ли?

Question

Я знаю, что если мы используем внутренний css и внешний css одновременно (на одном и том же селекторе), то внутренний стиль должен иметь более высокий приоритет и перезаписывать внешний стиль. Однако я столкнулся с проблемой здесь и не мог понять, почему.

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

<link rel="stylesheet" href="styles.css">
<style type="text/css">
    h2 {font-family: verdana; color: red;}
</style>enter code here

В стилях. css У меня есть

h2 {color: blue;}

Тогда стили работают как надо - элемент h2 выделен красным.

Но если я добавлю элемент ссылки после внутренних стилей:

<style type="text/css">
    h2 {font-family: verdana; color: red;}
</style>
<link rel="stylesheet" href="styles.css">

тогда каскадное правило больше не работает - h2 синий, а не красный, что означает, что внешний стиль теперь имеет более высокий приоритет, чем внутренний.

Это не имеет смысла, но я не смог понять почему. Может ли кто-нибудь просветить меня об этом? ТИА.

Answer 1

Поведение правильное, потому что ваш «внутренний стиль» не является встроенным стилем, он рассматривается на том же уровне, что и внешний css файл.

Во втором примере: сначала ваш браузер прочитал первое правило (h2 {color: red}), а затем переопределяет это правило на правило внутри стиля. css

Это ожидаемое поведение

Но если в вашем коде вы напишите встроенный стиль, например:

<h2 style='color: yellow'>This text will be yellow</h2>

, тогда это правило будет переопределять первые два правила.

«Каскадное» означает последнее прочитанное правило переопределяет первое.

Answer 2

Это работает точно так, как задумано, если вы связываете это таким образом. Стиль, который придет позже, переопределит предыдущий стиль. (Если селекторы ТОЧНО одинаковы).

Под «внутренними» вы можете подразумевать «встроенные» стили, которые имеют приоритет и будут переопределять любые другие стили.

Пример:

<h2 style="color: orange">Hello world</h2>

Это "правило встроенного стиля" будет переопределять большинство других правил, хотя есть также способы переопределить это.

Для получения дополнительной информации см. this . Существует также очень удобная справочная таблица .