Question

我是Web开发的新手，由于无法在某些视口尺寸上应用某些样式，因此我感到困惑。因此，我要应用的是容器内所有元素的字体大小，即下面的代码所示：

HTML

@DataProvider

CSS

<div class="nav-container">
    <h1><span class="buy">Buy</span>Books<span class="books">Books</span></h1>
    <nav class="navbar" style="margin:0;">
            <ul class="links" style="margin:0;">
                <li><b><a href="#"> Home</a></b></li>
                <li><a href=""> <b>Category</b></a></li>
                <li><a href=""> <b>Books</b></a></li>
            </ul>
        </nav>
        <div class="cart"><a href=""> <i class="fas fa-shopping-cart fa-2x"></i></a></div>
    </div>

但这可行

 @media (max-width:1200px){

 html{
        font-size:1.4rem;
    }
    .nav-container {
        font-size: 1rem;
    }

}

您可以看到媒体查询，如果我定位到容器不起作用，但是如果我定位到该容器中的特定元素，则可以正常工作。这是为什么？与该媒体查询中的html相同的问题也未应用。请帮助我有点困惑。

Answer 1

这是因为rem值是相对于html根元素而不是相对于父元素。也就是说，如果根元素的字体大小为16px，则所有元素的1 rem = 16px。如果未在根元素中明确定义字体大小，则1rem将等于浏览器提供的默认字体大小（通常为16px）。

在第二个CSS中，您将赋予h1更高的优先级，并且您正在重写用户代理样式表-默认浏览器设置。

source

Answer 2

这是由于所谓的“用户代理样式表”。这包含浏览器的所有默认样式。对于h1元素，您可以看到默认样式here。

未应用第一种样式的原因是因为您依赖于继承。大多数元素将继承其父代的样式。由于font-size元素的h1是在用户代理样式表中指定的，因此它不会继承font-size。

之所以应用第二种样式，是因为它比用户代理样式具有更高的特异性。您可以阅读有关CSS选择器特异性here的信息。您还可以使用以下声明覆盖h1元素的样式：

h1 {
  font-size: 1rem;
}

之所以会采用此方法，是因为它的声明晚于用户代理样式，因此浏览器更喜欢它。

媒体查询未应用元素的样式

2 个答案: