Переопределение (вес, специфичность)
Каждый селектор имеет свой вес (специфичность), который определяет, какой селектор будет использован на странице.
Например, вес тегов составляет «1».
a {color: blue;}
Если будет указано два тега, то вес селектора составит «2».
p a {color: green;}
a {color: blue;}
На примере выше, ссылка внутри абзаца (тега <p>
) будет зелёной. При этом селектор во второй строчке не переопределит цвет ссылки на синий, т.к. у первого селектора вес больше.
У атрибутов ИД вес больше, чем у классов.
#example {color: green;}
.example {color: blue;}
Если у одного элемента будет класс .example и ИД #example, то цвет будет окрашен в зелёный цвет, т.к. вес ИД выше, чем вес у классов.
Стиль, добавленный через атрибут «style», имеет вес больше, чем у классов и атрибутов (т.е. будет всегда перекрывать CSS-код, если в CSS не используется !important
).
Допустим есть код ниже, где есть большая вложенность.
/* <div class="red"></div> */
.red {
color: red;
}
div div div div div div div div div p {
color: blue;
}
Не смотря на большую вложенность, всё равно будет применён селектор .red
, т.к. вес классов выше, чем у тегов.
В CSS рекомендуется использовать теги или классы, т.к. их легко можно переопределить.
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта