Вторник, 08 Января 2013 08:57

Использование !important

Written by 
Оцени эту запись
(0 Голоса)

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

Разберем приоритетность стилей CSS для элемента с классом element:

 

<div class="element">Text</div>

 

Если для элемента в одном документе заданы два значения одного и того же свойства, то последний перекрывает первый 

 

.element {

color: red;

}

 

.element {

color: blue; /*второе свойство перекроет первое - цвет текста будет синим*/

}

 

Если заданы два разные значения, но у одного из них стоит !important, то привелегия именно у этого свойство. Не важно идет оно в файле первым или последним.

 

 

.element {

color: red !important; /*свойство с !important перекроет любое другое свойство - цвет текста будет красным*/

}

 

.element {

color: blue; 

}

 

Также на результирующее свойство будет влиять указание родителя.

 

 

.parent .element {

color: red; /*у элемента есть родитель с классом parent - цвет текста будет красным*/

}

.element {

color: blue; 

}

 

Результат:

 

 

Text

 

Стиль, примененный к элементу с указанием идентификатора, перекроет стиль для класса.

 

 

#elem {
 
color: red; 
 
}
.element {
 
color: blue; 
 
}

 

 

Text
Text

 

 

Additional Info

Комментарии  

 
0 #1 newJS 01.07.2017 03:37
Всегда думал, что стили в тегах перебивают всё, однако эта зараза, !important, перебивает вообще всё.
Цитировать
 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов