Специфика CSS - Внешняя таблица стилей против Внутренней таблицы стилей с использованием только классов

Question

У меня есть два класса CSS для одного элемента HTML: .c-headline-1 и .c-hero__headline. В моей внешней таблице стилей я использую .c-headline-1, а во внутренней таблице стилей (<style type="text/css">) я использую .hero__headline, но по какой-то причине значения свойства .c-headline-1 перезаписывают некоторые свойства .hero__headline ценности. Например, если оба имеют декларацию размера шрифта, .c-headline-1 ведет себя так, как будто имеет более высокую специфичность, так как перезаписывает размер шрифта .c-hero__headline.

Я думал, что внутренние таблицы стилей имеют более высокую специфичность, чем внешние таблицы стилей или нет?

Answer 1

Вы уверены, что заказ важен? Разве это не первый приоритетный порядок, где номер один является наиболее значимым, и его стиль будет применен первым.

1. Встроенный стиль
2. Внутренние таблицы стилей (стиль с элементом head)
3. Внешние таблицы стилей (ссылка href = "style.css" и т. Д.)

Пожалуйста, поправьте меня, если я ошибаюсь.

Answer 2

Внешние и внутренние таблицы стилей (в разделе заголовка) имеют одинаковый уровень приоритета (хотя и ниже приоритета встроенного стиля), затем самый высокий приоритет присваивается в соответствии с порядком их объявления

Последний из объявленных получает наивысший приоритет

---

В конечном итоге порядок следующий

1. Встроенный стиль (внутри элемента HTML)
2. Внешние и внутренние таблицы стилей (в разделе заголовка) -> Последний определенный (внутренний или внешний) имеет наивысший приоритет
3. Браузер по умолчанию

Чтобы узнать больше, вы можете ознакомиться с разделом Каскадный заказ на этой странице. https://www.w3schools.com/css/css_howto.asp

Answer 3

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