» » Приоритеты в css3
79 0  

Приоритеты в css3

У меня есть знакомый который ас и бог в .java и .php но он ненавидит паталогически .css3 именно через принцип каскадности (Cascading Style Sheets — каскадные таблицы стилей). Каскадность может сломать моз любому, так как не всегда даже браузер, в разработчеке, показывает зависимость стилей, особенно ярко проявляются в верстке где много !importan. Поэтому гуру верстки верстают без !importan - хотя в нем нет ничего плохого....

Как проявляется каскадность или приоритет?

Каждый селектор в css3 получает баллы которые плюсуются между собой.

Если несколько css-правил с одинаковым весом влияют на один элемент, то элемент получит стили правила, которое ближе к концу HTML страницы (ниже в коде).


Приоритеты основных элементов:

Любой селектор тегов - 1 балл
Класс      - 10 балов
Идентификатор - 100 балов
Строчный стиль - 1000 балов
!important     - ~

Таблица с балами селекторов:

* {}                        /* =   0 */
li {}                       /* =   1 */
li::first-line {}           /* =   2 */
ul li {}                    /* =   2 */
ul ol+li {}                 /* =   3 */
ul li.red {}                /* =  12 */
li.red.level {}             /* =  21 */
li:not(.red){}              /* =  11 */
li:not(.red):not(.green){}  /* =  11 */
#t34 {}                     /* = 100 */
#content #wrap {}           /* = 200 */
<div style=""></div>       /* = 1000 */
li {.color:red!importan;}  /* = ~    */               

!important - перебивает абсолютно все правила, включая атрибут style. Его можно перебить только еще одним !important расположенным ниже в коде.

***

wink В жизини никто не считает баллы, просто немного практики и обнаружения ошибок все раскладет на полочки. Главное Вы должны запомнить что:

- последовательность (.) (.)  всегда сильнее одного (.) 
- (#) всегда сильнее (.)

- Кто ниже в коде css тот и сильнее
- !mportant используем только в крайнем случае, в самом крайнем.

- Медиа запросы, например: @media ( max-width:500px ){ } не участвуют в подсчете приоритета и всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие, когда срабатывает указанное медиа условие.


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019