gpt4 book ai didi

css - 影响不存在类的媒体查询

转载 作者:太空宇宙 更新时间:2023-11-03 21:03:55 25 4
gpt4 key购买 nike

简短版,为什么我看到的是绿色和蓝色,H2s 而不是红色和蓝色?

更长的版本如果您只看代码,这可能会更容易,但我还是会解释一下。我有默认的 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>

最佳答案

你的问题出在你的.bar选择器:

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

使用此选择器,您可以定位所有 <h1>带有 .bar 的元素内的标签类也是所有<h2><h3> HTML 文档中的标记。

相反,您应该将其更改为:

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

这将只针对来自 .bar 的子类。

了解有关组合器和选择器列表的更多信息 here .

关于css - 影响不存在类的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55950205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com