CSS-свойства font и font-weight не работают вместе в одном селекторе

Вопрос-ответ HTML/CSS
1

В одном селекторе применяются эти 2 свойства, в итоге не работает font-weight. Но если убрать font - тогда работает. Почему так?
https://jsfiddle.net/LenaR/gdb5seup/2/

2

Font - это сокращение для нескольких свойств сразу:

The font CSS property is a shorthand for font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

Поэтому он перезаписывает.

Можешь просто поменять их местами и все взлетит.

1 лайк
3

Потому что стили в CSS подчиняются правилам приоритета. Одно из них - свойства ниже всегда перебивают аналогичные свойства, расположенные в коде выше.
Кроме того, свойство font - составное, одна из его частей - font-weight. В таких случаях, если не прописано явное значение, свойство примет значение по умолчанию, а оно для font-weight - 400. Вот поэтому ваш font перебивает находящийся выше font-weight.

1 лайк