Свойства CSS применяются не для всех элементов, существуют определенные правила стилей, по которым определяется к каким именно элементам. В случае, если к элементу были указаны одинаковые свойства, то приментся то значение, которое указано последним. При применении противоречивых стилевых правил более высокий приоритет будет у того, у которого специфичность больше. Подобным правилам и будет посвящена эта статья.
Специфичность и приоритеты
Для подсчета специфичности следует сложить значения: за каждый селектор тега и псевдоэлемент - 1, класс и псевдокласс - 10, идентификатор - 100.
Для назначения приоритета к значению применяется слово !important, которое указывается после значения:
p .first {color:red !important}
В этом случае в параграфе с классом first текст будет красным и другие свойства его не перекроют.
Группирование и наследование
Чтобы сгруппировать несколько селекторов, можно перечислить их через запятую. Также можно перечислять идентификаторы и классы:
H1, H2, # new {color:yellow; padding:5px;}
Используя наследование можно указать некоторые значения один раз для родителей верхнего уровня, например тега body.
body {padding:5px; margin-left:10px; font-size:12px}
Указав значения к тегу body, эти значения будут применяться для всей страницы, если они не будут изменены другим значением.
Дополнительные символы
- Вертикальная черта - в этом случае выбирается один из элементов, указанных через | (solid|double|ridge)
- Двойная вертикальная черта - здесь значения могут использоваться совместно или отдельно друг от друга (font-size||font-weight)
- Квадратные скобки - в них заключается группа значений, из которых может быть выбрано одно, но не будет являться обязательным ([red|blue|green])
- Фигурные скобки - значение перед фигурными скобками должно повторяться не менее х, но не более y раз ({x,y})
