Question

最近我一直在尝试将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>与css变量的使用不兼容的情况下，我离开了<link>。

使用此代码，背景颜色保持白色。如果我不使用变量，它将根据情况进行更改。我想念什么吗？

感谢您的帮助。

Answer 1

您正在加载具有

的Bootstrap CSS

body {
    background-color: #FFF;
}

当您使用浏览器的开发人员工具并检查body元素时，这很容易发现：

这会覆盖您的

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

在CSS中，如果两个相互矛盾的规则具有相同的CSS特殊性，则稍后定义的规则将获胜。

因此，如果要覆盖此Bootstrap样式，请确保在包含要覆盖规则的样式表之后，将样式表包含在文档中。

Answer 2

您已链接到自己的CSS，之前，您已链接到bootstrap.min.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">

Answer 3

在导入引导程序样式表后，您应该尝试导入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

您的代码正确。问题来自另一个正在覆盖您当前CSS规则的CSS。贝娄是您的代码，它保持不变，并且证明它有效。

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

自定义CSS属性“ background-color”不起作用

4 个答案: