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

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

Например, вес тегов составляет «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 рекомендуется использовать теги или классы, т.к. их легко можно переопределить.