CSS медиа-запрос не выберет тег заголовка, но выберет элемент заголовка по его идентификатору

Question

Почему это происходит?

https://codepen.io/headonshoe/pen/dyorVVg

см. Кодовую ручку, header является первым элементом в теле HTML, а Медиа-запрос находится в самом низу CSS

Answer 1

Ваш селектор в обычном списке стилей для заголовка - #header, в медиа-запросе вы используете header в качестве селектора для этого правила.

Хотя оба элемента применимы к вашему элементу <header id="#header">, первый (#header { ...}) более специфичен c, поскольку он использует идентификатор и, следовательно, не будет отменен правилом header { ...} в медиа-запросы.

Используйте один и тот же селектор в обоих правилах, чтобы избежать этого.

Answer 2

, если вы хотите выбрать только тег <header> в css, вы должны написать заголовок без хэштега, как это (# его для идентификатора и. Для класса):

header {
    display: grid;
    align-items: center;
    grid-template-columns: 300px 1fr min-content;
    grid-template-areas: "logo . end";
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 75px;
    padding: 0 20px;
    background-color: #eee;
}