CSS - правила за предимство (тегло)

Знаете ли, че CSS определя специфично тегло на всяко правило за стил? Това е много аспект на CSS, тъй като ще се избегнат всякакви несъответствия между това, което искате да получите и това, което получавате в действителност.

Пример:

Изпробвайте следния HTML код:

 div {цвят на фона: син;} 

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

Сега добавете клас към него:

 div {цвят на фона: син;}. MaDiv {цвят на фона: червен;} 

Квадратът стана червен!

Сега използвайте ID:

 div {цвят на фона: син;} .maDiv {цвят на фона: червен;} #maDiv {цвят на фона: жълт;} 

Квадратът вече е жълт, защото идентификаторът е по-силен от класа.

След това използвайте дефиниран стил и етикетите:

 div {цвят на фона: син;}. MaDiv {цвят на фона: червен;} # MaDiv {цвят на фона: жълт;} 

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

Теглата

Тези резултати са следствие от теглото (наричано още правила за приоритет) CSS:

• Теглото на етикет е 1
• Теглото на класа е 10.
• Теглото на идентификацията е 100.
• Теглото на атрибута на стила е 1000.

Това са основното тегло, има и други, например, псевдокласи (: hover, : after, : focus ...). Пример атрибута CSS: hover само добавя малко тегло към елемент, когато курсорът на мишката е прехвърлен.

Натрупването на тегло

Правилото за стил може да има средно тегло. Всъщност теглото на тежестта.

Пример:

 div {background-color: blue;} .maDiv {цвят на фона: червен;} .maDiv {цвят на фона: жълт;} 

Както виждате, имам елемент (тегло 1) и два равни класа (тегло 10): последният елемент поема и квадратът ни е жълт. Сега след добавяне

 div {background-color: blue;} div.maDiv {фонов цвят: червен;} .maDiv {цвят на фона: жълт;} 

Квадратът става червен. Защо?

• ".maDiv" - 10
• "div.maDiv" съчетава елемент и клас - 11!

Предупреждение: понякога добавянето на клас към правило не е достатъчно, за да се увеличи теглото на всички участващи елементи.

Отбележи, че

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

 div {цвят на фона: син;} div # maDiv {цвят на фона: червен;} 

В резултат на това:

 div {цвят на фона: син;} div #maDiv {цвят на фона: червен;} 

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

"Но защо, елементът + ID =, така че винаги трябва да е червено!"

Обърнете внимание на фината разлика:

• div # maDiv : се прилага към div с ID "maDiv".
• div #maDiv : Прилага се за всички елементи, чийто идентификатор е "maDiv", съдържащ се в родителски елемент, наречен "div".

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

Примери:

• p .myClass a {} : за всички връзки, съдържащи се във всеки елемент, чиято класа е "myClass", всички съдържащи се във всеки

  елемент. Тегло: 12.

• p.myClass, a {} : за всички връзки и всички

  чийто клас е "myClass". Тегло: 11 или 1

• p, .myClass, a {} : за всички връзки и всички елементи, чийто клас е "myClass" и всички други

  елемент. Тегло: 1 до 10 или 1