CSS Body背景颜色不起作用？

Question

CSS Body背景颜色不起作用？

10

我假设这是一个非常简单的问题，但我盯着屏幕看了很久都没能解决。我想改变我的HTML文档的一些部分，但是什么也没有改变？

@charset "utf-8";
body
{
    background-color: aqua;
}

<!DOCTYPE html>
<html>
<head>
    <title>Statistics</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
 integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-lg btn-default-outline">View All</button>  
</body>
</html>

如果我更改背景图片，它就正常工作。有什么想法为什么会这样？可能是 Bootstrap CSS 的原因吗？

- user5231341

是的，某些东西正在重写您的CSS规则，您可以使用!important强制使用aqua：background-color: aqua !important。 - potashin

3

CSS中的顺序很重要。Bootstrap CSS设置了一个覆盖你CSS中的背景颜色的背景颜色。更改CSS文件包含的顺序即可解决。 - jmoerdyk

谢谢！问题已解决。 - user5231341

不要在你的代码中使用!important标志，使用浏览器开发者工具/检查器来查看哪些元素正在覆盖该元素的样式。 - mattdevio

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- niorad · Accepted Answer

如果你在"aqua"后面加上!important，它会起作用吗？

@charset "utf-8";
body
{
    background-color: aqua !important;
}

如果是的话，那么可能有其他样式表（如bootstrap.css）正在干扰。你还应该将你的自定义css文件放在bootstrap-css之后。