自定义 CSS 属性“背景颜色”不起作用
[英]Custom CSS property "background-color" not working
问题描述
我最近一直在尝试将 CSS 变量用于一个非常简单的代码中。 它实际上不起作用。 我仔细检查了我找到的关于如何使用变量的信息，但我找不到我的错误。 也许我做错了什么？
:root { --my-color: red; } body { background-color: var(--my-color); }
<!DOCTYPE html> <html> <head> <title>My title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="./style/mainPage.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-12"> <h1>HELLO WORLD</h1> </div> </div> </body> </html>
我离开了<head>以防某些<link>与 css 变量的使用不兼容。
使用此代码，背景颜色保持白色。 如果我不使用变量，它会相应地改变。 我错过了什么吗？
谢谢你的帮助。
4 个解决方案
解决方案1
3 2019-12-05 12:21:25
您正在加载 Bootstrap css，它具有
body {
background-color: #FFF;
}
当您使用浏览器的开发人员工具并检查 body 元素时，很容易发现这一点：
这会覆盖您的
background-color: var(--my-color);
在 CSS 中，如果两个相互矛盾的规则具有相同的 CSS 特性，则后定义的规则获胜。
因此，如果您想覆盖此 Bootstrap 样式，请确保您的样式表包含在文档中包含您要覆盖的规则的那个之后。
解决方案2
2 已采纳 2019-12-05 12:21:03
在链接到bootstrap.min.css之前，您已经链接到自己的 CSS。
bootstrap.min.css在body元素上设置背景颜色，它会覆盖您的设置。
交换顺序，以便您的 CSS 覆盖库而不是相反。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./style/mainPage.css">
解决方案3
1 2019-12-05 12:21:33
您应该在导入引导程序样式表后尝试导入您的 css，这样的事情对我有用：
<head>
<title>My title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<link rel="stylesheet" type="text/css" href="./main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script>
</head>
解决方案4
-1 2019-12-05 12:21:03
你的代码是正确的。 问题来自另一个 CSS，它覆盖了您当前的 CSS 规则。 Bellow 是您的代码，未更改，并且证明它有效。
:root { --my-color: red; } body { background-color: var(--my-color); }
<div class="row"> <div class="col-sm-12"> <h1>HELLO WORLD</h1> </div> </div>
使用开发人员工具（按 F12）查看谁在覆盖您的 CSS 规则。
在这种情况下，最佳做法是在导入其他库后立即链接您的 CSS 文件。
<head>
<title>My title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./style/mainPage.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- MY OWN CUSTOM CSS FILE -->
<link rel="stylesheet" type="text/css" href="/csss/my_local_file.css">
</head>
background-color css属性在表中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.