Question

简短版本，为什么我看到绿色和蓝色，H2而不是红色和蓝色？

长版如果只看代码，这可能会更容易，但是我还是会解释。我有默认的H1，H2，H3文字颜色，蓝色。我有一个媒体查询，它检测到浏览器大小超过768像素（网站的桌面版本）。

在媒体查询中，我将H1，H2，H3的颜色设置为红色。有一个名为“ bar”的类，它也具有h1，h2，h3颜色样式，这次是绿色。

存在一个类为“ foo”的div。没有带有“ bar”类的div。

如果我在媒体查询中添加了一个“ foo”类（黄色），则它按预期工作，如果我删除了bar类，一切都很好。但是，分配给类的H2如何影响没有与之关联的类名称的div？尤其是在媒体查询中设置了默认h2时。我希望看到红色和蓝色，而不是绿色和蓝色。

有人可以向我解释为什么我看到这种行为吗？

<!doctype html>
<html lang="en">
<head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hi</title>
    <meta name="description" content="this">
<style>
 h1,h2,h3{
     color:blue;
 }
 /*Desktop layout*/
@media (min-width: 768px) {
     h1,h2,h3{
         color:red;
     }

    .bar h1,h2,h3{
        color:green;
    }

}
</style>
</head>
<body>
<div class="foo">
    <h2>me foo</h2>
    <p>you bar  </p>
</div>
</body>
</html>

Answer 1

您的问题出在您的.bar选择器中：

.bar h1,h2,h3{
   color:green;
}

使用此选择器，您可以将目标定位在具有<h1>类的元素中的所有.bar标签以及HTML文档中的所有<h2>和<h3>标签。

相反，您应该将其更改为：

.bar h1, 
.bar h2, 
.bar h3 {
   color:green;
}

这将仅针对.bar类的孩子。

进一步了解组合器和选择器列表here。

Answer 2

您当前仅覆盖h1，而不覆盖h2，h3。将您的代码更改为：

<!doctype html>
<html lang="en">
<head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hi</title>
    <meta name="description" content="this">
<style>
 h1,h2,h3{
     color:blue;
 }
 /*Desktop layout*/
@media (min-width: 768px) {
     h1,h2,h3{
         color:red;
     }

    .bar h1,.bar h2, .bar h3{
        color:green;
    }

}
</style>
</head>
<body>
<div class="foo">
    <h2>me foo</h2>
    <p>you bar  </p>
</div>
</body>
</html>

媒体查询影响不存在的类

2 个答案: