CSS -приоритет правил (вес)

Знаете ли вы, что CSS придает определенный вес каждому правилу стиля? Это очень важный аспект CSS, поскольку он позволит избежать любых несоответствий между тем, что вы хотите получить, и тем, что вы получаете в реальности.

Пример:

Попробуйте следующий HTML-код:

 div {background-color: blue;} 

В результате вы получите синий квадрат размером 100X100 пикселей.

Теперь добавьте класс к нему:

 div {background-color: blue;}. MaDiv {background-color: red;} 

Площадь стала красной!

Теперь используйте идентификатор:

 div {background-color: blue;} .maDiv {background-color: red;} #maDiv {background-color: yellow;} 

Квадрат теперь желтый, потому что ID сильнее класса.

Далее используйте стиль тегов ithe:

 div {background-color: blue;}. MaDiv {background-color: red;} # MaDiv {background-color: yellow;} 

Квадрат становится зеленым: в теории ему назначены четыре разных цвета!

Веса

Эти результаты являются следствием веса (также называемого правилами приоритета) CSS:

• Вес метки 1
• Вес класса 10.
• Вес удостоверения личности составляет 100.
• Вес атрибута стиля равен 1000.

Это основной вес, есть и другие, например, псевдоклассы (: hover, : after, : focus ...). Пример атрибута CSS: hover только добавляет небольшой вес элементу, когда курсор мыши наведен.

Накопление веса

Правило стиля может иметь промежуточный вес. Действительно, весовой стек.

Пример:

 div {background-color: blue;} .maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Как видите, у меня есть элемент (вес 1) и два равных класса (вес 10): последний элемент вступает во владение, и наш квадрат желтый. Теперь при добавлении

 div {background-color: blue;} div.maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Квадрат становится красным. Зачем?

• ".maDiv" - 10
• «div.maDiv» объединяет элемент и класс - 11!

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

Обратите внимание, что

Сравните результат этого кода:

 div {background-color: blue;} div # maDiv {background-color: red;} 

С результатом этого:

 div {background-color: blue;} div #maDiv {background-color: red;} 

В первом случае наш div красный, во втором - синий!

«Но почему, элемент + ID =, поэтому он всегда должен быть красным!»

Обратите внимание на тонкую разницу:

• div # maDiv : применяется к div с идентификатором "maDiv".
• div #maDiv : применяется ко всем элементам с идентификатором «maDiv», содержащимся в родительском элементе «div».

Наш квадрат касается только первого правила. Как правило, всегда обращайте внимание на то, как вы пишете свои правила, правильно используете пробелы, запятые и т. Д.

Примеры:

• p .myClass a {} : для всех ссылок, содержащихся в любом элементе, класс которого «myClass», все содержатся в любом

  элемент. Вес: 12

• p.myClass, a {} : для всех ссылок и всех

  чей класс "myClass". Вес: 11 или 1

• p, .myClass, a {} : для всех ссылок и всех элементов, чей класс «myClass» и все

  элемент. Вес: от 1 до 10 или 1