css порядок обработки таблиц стилей

Question

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

1. materialize.css
2. login.css

, когда я смотрю на то, как они применяются на DOM Я вижу, что они не применяются в том порядке, в котором они загружены.

1. материализовать (линия 2587)
2. Войти
3. материализовать (строка 6701)

Я предполагаю, что это поведение вызвано управляемых событиями, нон модели блокировки Javascript/BrowserEngine.

Но мне нужно иметь возможность надежно переопределить материализацию css выборочно. Я уверен, что есть. Но как?

Answer 1

Это не только стили. речь идет о селекторах. .row .col.s3 имеет более высокий приоритет над .

Read this article about specificity on css-tricks.

Answer 2

Я знаю, что стили применяются в каскадном порядке

Correct

они не применяются в порядке их загрузки

Correct. Каскадный порядок - это не «порядок их загрузки».

Ну, это, но это 4-й и последний определяющий фактор, который используется только в качестве тай-брейка, если все три предыдущих фактора равны.

Но мне нужно, чтобы иметь возможность надежно перекрыть материализовать CSS выборочно

использовать более ранние факторы the cascade order rules. specificity of the selector обычно является тем, который вы хотите изменить.

Специфичность селектора вычисляется следующим образом:

• счетчик 1, если декларация от является «стиль» атрибут, а не правило с селектором, 0 в противном случае (= а) (В HTML, значения атрибута стиля « » являются правилами таблицы стилей. Эти правила не имеют селекторов , поэтому a = 1, b = 0, c = 0 и d = 0.)
• подсчитать количество ID атрибутов в селекторе (= б)
• подсчитать число других атрибутов и псевдо-классов в селекторе (= с) ​​
• подсчитать количество элементов имен и псевдоэлементы в селекторе (= d)

Специфика основана только на форме селектора. В частности, селектор форма «[id = p33]» считается как селектор атрибутов (a = 0, b = 0, c = 1, d = 0), даже если атрибут id определяется как «ID» в DTD исходного документа.

Сочетание четырех чисел a-b-c-d (в цифровой системе с большой базой ) дает специфику.

Answer 3

, когда я смотрю на то, как они применяются в DOM Я вижу, что они не применяются в порядке их загрузки.

Порядок загрузки ресурсов CSS не имеет ничего общего со спецификой селекторов. Ничего.

Но позиция <link> и <style> в DOM имеет значение для порядка использования правил CSS.

Если два селектора имеют одинаковую специфичность, тогда правило, появившееся «позже в порядке DOM и в файле CSS», применяется поверх другого.