предисловие
Многие люди слышали о весах CSS и немного разбираются в них, но многие люди могут не так хорошо понимать конкретные правила или некоторые вопросы о весах CSS. В повседневной разработке мы более или менее сталкиваемся с проблемой, что правила CSS не вступают в силу.Чтобы сократить время на отладку правил CSS и глубоко понять веса CSS, это очень важно. Если вам это нравится, вы можете лайкнуть / подписаться и поддержать его.Я надеюсь, что вы сможете что-то получить после прочтения этой статьи.
Личный блог, чтобы узнать:obkoro1.com
Резюме правила веса:
- !important имеет наивысший приоритет, но также будет переопределен важными важными
- Встроенные стили всегда переопределяют любые стили из внешних таблиц стилей (кроме !important).
- При использовании одного селектора невозможно заставить правила CSS действовать на разных уровнях.
- Если два селектора с разным весом воздействуют на один и тот же элемент, вступает в силу правило css с большим весом.
- Если два селектора с одинаковым весом действуют на один и тот же элемент: последний селектор является последним правилом.
- При одинаковом весе вступает в силу селектор, близкий к элементу.
Для чего используется приоритет веса css?
Одни и те же правила CSS объявляются по-разному для одного и того же элемента.Браузер будет использовать вес, чтобы определить, какой метод объявления наиболее подходит для этого элемента, чтобы применить к элементу все правила CSS, объявленные в этом методе объявления..
Пять уровней весов и их веса
-
!important;
-
встроенные стили;
-
Селектор ID, вес: 100;
-
класс, селектор атрибутов и селектор псевдоклассов, вес: 10;
属性选择器指的是:根据元素的属性及属性值来选择元素,比如button的type属性等。 伪类选择器: :active :focus等选项.
-
Селекторы тегов и селекторы псевдоэлементов, вес: 1;
伪元素选择器: :before :after
Иерархические отношения:
!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
Правила веса:
1. Устарело! важно
Не рекомендуется!important
,потому что!important
Здесь вообще нет структуры и контекста, и во многих случаях проблема веса заключается в том, что вы не знаете, где определить!important
вызванный.
Переопределить важно:
Хотя мы должны стараться избегать использования !important, вы должны знать, как переопределить Important, и этого можно добиться, добавив некоторые веса, codepen'sdemo
//!important 优先级最高,但也会被权重高的important所覆盖
<button id="a" class="a">aaa</button>
#a{
background: blue !important; /* id的important覆盖class的important*/
}
.a{
background: red !important;
}
2. Встроенные стили всегда переопределяют любые стили во внешней таблице стилей, которые!important
покрытие
3. При использовании одного селектора невозможно заставить правила CSS действовать на разных уровнях.
Независимо от того, сколько селекторов классов состоит, ни один из селекторов ID не имеет большого веса.. Точно так же, независимо от того, сколько элементов состоит из селекторов, ни один селектор класса не имеет большого веса, и независимо от того, сколько идентификаторов состоит из селекторов, ни один встроенный стиль не имеет большого веса.
кодовая ручкаdemo;
在demo中使用了11个class组成一个选择器,最后还是一个ID选择器,设置的样式生效。
Можно представить, что в своеобразной иерархической системе фантастических романов нет сопоставимости без прорыва этого уровня.
Поэтому веса сравниваются только тогда, когда обе стороны находятся на одном уровне.
4. Если два селектора с разным весом воздействуют на один и тот же элемент, действует правило css с большим значением веса
Селектор может содержать одну или несколько точек расчета, связанных с весом.Если значение веса, рассчитанное по значению веса, больше, вес селектора считается высоким. Возьмите простой каштан:
.test #test{ } // id 100+class 10=110;
.test #test span{} // id 100+class 10+span 1=111;
.test #test .sonClass{} // id 100+class 10+class 10=120; //生效
5. Если два селектора с одинаковым весом действуют на один и тот же элемент: селектор, появившийся позже, является последним правилом.
<div id="app">
<div class="test" id="test">
<span >啦啦啦</span>
</div>
</div>
#test span{
color:blue;
}
#app span{ // 生效 因为后面出现
color: red;
}
6. При одинаковом весе вступает в силу селектор, близкий к элементу
Например, различные таблицы стилей, заголовки заголовков и т. д. посмотрите на следующие каштаны:
#content h1 { // css样式表中
padding: 5px;
}
<style type="text/css">
#content h1 { // html头部 因为html头部离元素更近一点,所以生效
padding: 10px;
}
</style>
предложение:
- избегать использования
!important
; - Используйте id для увеличения веса селектора;
- Уменьшите количество селекторов (избегайте слоев вложенности);
Эпилог
Выше приведено содержание веса css в этой статье.Если что-то не так, пожалуйста, поправьте меня! Я надеюсь, что вы сможете получить что-то после прочтения. Если вам это нравится, поторопитесь и нажмитеподпискаСледуйте / вроде.
Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.
личный блог and Персональная домашняя страница Nuggets, если вам нужно перепечатать, пожалуйста, поставьте ссылку на исходный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки.
Если вам понравилась эта статья, обратите внимание на мой номер подписки, долгий путь к технологиям и с нетерпением ждите совместного обучения и роста в будущем.
Выше 2018.5.19