我正在学习一本书中的教程，它说使用 CSS 为 html 和 body 元素设置不同的背景颜色。主体的最大宽度上限为 1020 像素，因此如果窗口足够宽，html 背景颜色将显示在任一侧。这是背景颜色的 CSS 代码，布局 CSS 在单独的文件中:
html{
background-color: rgb(235, 177, 131);
background-color: hsl(27, 72%, 72%);
}
body{
color: rgb(91, 91, 91);
background-color: ivory;
}
我已经在 Chrome、Safari 和 Firefox 中对此进行了测试，这三者都忽略了 html 样式规则。但是，当我内联指定背景颜色时，例如:
<html style="background-color: hsl(27, 72%, 72%);">
然后就可以了。有谁知道这里会发生什么？
** 编辑 **
这是 HTML 文件的开头，您可以看到我在 head 元素中链接样式表:
<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="triathlon, running, swimming, cycling" />
<title>Tri and Succeed Sports</title>
<link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
</head>
**更新**
发现问题。我在 html 样式规则之前的 @charset 指令末尾缺少分号。这导致浏览器忽略它。现在工作正常。
最佳答案
你可以尝试创建一个像
这样的类.html {
background-color: red;
}
然后
<html class="html">
</html>
此外，这是一个 fiddle Chrome、Firefox 和 IE 中的代码和图片
Chrome :
火狐:
IE(win7 上的垃圾浏览器):
编辑:我将 body 缩小了 4 倍，这样我就可以证明它是有效的。
关于html - 浏览器忽略 HTML 元素的 CSS 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44740859/