😎 » CSS3 » Приорітети в css3
1 126 1  

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

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

Тому гуру верстки верстають без !importan - хоча в ньому немає нічого поганого.

Як визначається приорітет або каскадність стилів?

Кожен селектор у css3 отримує бали, які плюсуються між собою.

Якщо кілька css-правил з однаковою вагою впливають на один елемент, то елемент отримає стилі правила, яке ближче до кінця HTML сторінки (нижче в коді).

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

Будь-який селектор - 1 бал
Клас      - 10 бал
ID - 100 балів
Строчний стиль (style="") - 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 розташованим нижче в коді. fellow Но fellow Можливо і таке

***

wink У житті ніхто не вважає бали, просто трохи практики та виявлення помилок все розкладе на полички. Головне Ви повинні запам'ятати що:

- послідовність (.) (.)  завжди сильніший за один (.) 
- (#) завжди сильніший (.)

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

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


15 квітня 2024 21:02

Я негр, негром быть слооооожно



Залишити свій коментар:

Досвід у веброзробці:

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