css - CSS 媒体查询不会选择标题标签，但会通过其 ID 选择标题元素

Question

为什么会这样？

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

看codepen，header是HTML正文中的第一个元素，媒体查询在CSS的最底部

标签： csscss-selectorsmedia-queries

Answer 1

您在标题的常规样式列表中的选择器是#header，在您用作规则选择器的媒体查询header中。

虽然两者都适用于您的<header id="#header">元素，但第一个 ( #header { ...}) 更具体，因为它使用 ID，因此不会被header { ...}媒体查询中的规则推翻。

在两个规则中使用相同的选择器来避免这种情况。