自定义 CSS 属性“背景颜色”不起作用

Question

I've been trying to use CSS variables recently into a very simple code.我最近一直在尝试将 CSS 变量用于一个非常简单的代码中。 It actualy did not work.它实际上不起作用。 I double checked the informations I found about how to use variables but I can't find my mistake.我仔细检查了我找到的关于如何使用变量的信息，但我找不到我的错误。 Maybe am I doing something wrong ?也许我做错了什么？

 :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>

I left the <head> in case of some <link> are not compatible with the utilisation of css variables.我离开了<head>以防某些<link>与 css 变量的使用不兼容。

With this code, the background-color stays white.使用此代码，背景颜色保持白色。 If I do not use a variable instead, it changes accordingdy.如果我不使用变量，它会相应地改变。 Am I missing something ?我错过了什么吗？

Thanks for your help.谢谢你的帮助。

Answer 1

You are loading Bootstrap css which has您正在加载 Bootstrap css，它具有

body {
    background-color: #FFF;
}

This is easy to find out when you use the developer tools of your browser and inspect the body element:当您使用浏览器的开发人员工具并检查 body 元素时，很容易发现这一点：

This overwrites your这会覆盖您的

background-color: var(--my-color);

In CSS, if two contradictory rules have the same CSS specificity, the one defined later wins.在 CSS 中，如果两个相互矛盾的规则具有相同的 CSS 特性，则后定义的规则获胜。

So if you want to override this Bootstrap style, make sure your stylesheet gets included in the document after the one which has the rule you want to override.因此，如果您想覆盖此 Bootstrap 样式，请确保您的样式表包含在文档中包含您要覆盖的规则的那个之后。

Answer 2

You've linked to your own CSS before you link to bootstrap.min.css .在链接到bootstrap.min.css之前，您已经链接到自己的 CSS。

bootstrap.min.css sets the background colour on body element which overrides your settings. bootstrap.min.css在body元素上设置背景颜色，它会覆盖您的设置。

Swap the order so your CSS overrides the library rather than the other way around.交换顺序，以便您的 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">

Answer 3

you shpuld try importing your css after you import bootstraps stylesheet, something like this worked for me:您应该在导入引导程序样式表后尝试导入您的 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>

Answer 4

Your code is correct.你的代码是正确的。 The problem is from another CSS which is overwriting your current CSS rule.问题来自另一个 CSS，它覆盖了您当前的 CSS 规则。 Bellow is your code, unaltered, and the proof it works. 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>

Use Developer Tools (press F12) to see who is overwriting your CSS rules.使用开发人员工具（按 F12）查看谁在覆盖您的 CSS 规则。

The best practice in such cases is to link your CSS file immediatedly after you import other libraries.在这种情况下，最佳做法是在导入其他库后立即链接您的 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>

自定义 CSS 属性“背景颜色”不起作用

问题描述

4 个解决方案

解决方案1
3 2019-12-05 12:21:25

解决方案2
2 已采纳 2019-12-05 12:21:03

解决方案3
1 2019-12-05 12:21:33

解决方案4
-1 2019-12-05 12:21:03

自定义 CSS 属性“背景颜色”不起作用

问题描述

4 个解决方案

解决方案1 3 2019-12-05 12:21:25

解决方案2 2 已采纳 2019-12-05 12:21:03

解决方案3 1 2019-12-05 12:21:33

解决方案4 -1 2019-12-05 12:21:03

解决方案1
3 2019-12-05 12:21:25

解决方案2
2 已采纳 2019-12-05 12:21:03

解决方案3
1 2019-12-05 12:21:33

解决方案4
-1 2019-12-05 12:21:03