Переопределение (вес, специфичность)

Каждый селектор имеет свой вес (специфичность), который определяет, какой селектор будет использован на странице.

Например, вес тегов составляет «1».

a {color: blue;}

Если будет указано два тега, то вес селектора составит «2».

p a {color: green;}
a {color: blue;}

Здесь стоит обратить внимание на то, что если ссылка будет внутри абзаца (тега <p>), то ссылка будет зелёным цветом, как определено в коде выше.

Для начинающих может показаться, что ссылка должна быть синим цветом, потому что вторая строчка должна перекрыть первую строчку. Но браузер применяет стили первой строчки, т.к. у первой строчки вес больше, чем у второй.

Классы имеют вес в 10 очков (оценки взяты из стандарта CSS, только вместо «вес» используется термин «специфичность»). А атрибуты ИД имеют 100 очков.

#example {color: green;}
.example {color: blue;}

Если у одного элемента будет класс .example и ИД #example, то цвет будет окрашен в зелёный цвет, т.к. вес ИД выше, чем вес у классов.

Стиль, добавленный через атрибут style имеет вес в 1000 очков (т.е. будет всегда перекрывать CSS-код, т.к. имеет наибольший вес, если в CSS не используется !important).