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

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

Например, вес тегов составляет «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).

В CSS рекомендуется использовать теги или классы, т.к. их легко можно переопределить.