CSS不工作，W3.CSS覆盖？

Question

我复制了一个W3.CSS模板，我将使用它作为基础来构建我的网页。我试图添加一些自定义CSS来更改文本，但由于某种原因，它不能工作？我在W3.CSS之后导入自定义CSS文件，因此它将覆盖W3.CSS，但出于某种原因，它会与W3.CSS粘在一起.以下是我的文件和代码: style.css (自定义css)：

h1 {
    font-family: "Arial", sans-serif;
    color:red;
}
.heading {
    font-family: "Arial", sans-serif;
    color:red;
}

和index.html：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>

然后在后面的index.html中：

<div class="w3-row w3-padding-64">
    <div class="w3-twothird w3-container">
      <h1 class="w3-text-teal heading">Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
        dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

标题是蓝色的，但我要红色的。我的CSS不工作是因为某种原因..。我在一个空白的html模板上尝试了我的css，它成功了，所以W3正在做一些事情，但我不知道为什么。

Answer 1

这应该可以工作，所以我检查了W3 css，它在w3-text-teal上有一个！重要的标记，这意味着它无论如何都会被覆盖，除非您在CSS中也包含了一个！重要的标记。所以，您可以做的是: style.css：

h1 {
    font-family: "Arial", sans-serif;
    color:red;
}
.heading {
    font-family: "Arial", sans-serif;
    color:red !important;
}

你不应该使用！重要的是，除非你真的必须使用。但是由于W3.css显然经常使用它，所以您必须使用当前的设置。您还可以从标记中删除w3-text-teal类，它也将工作，而不必添加一个！重要标记。我建议您这样做，因为这样您就不必使用！重要标记。

<h1 class="heading">Heading</h1>

而不是：

<h1 class="w3-text-teal heading">Heading</h1>

你的css仍然是一样的：

h1 {
    font-family: "Arial", sans-serif;
    color:red;
}
.heading {
    font-family: "Arial", sans-serif;
    color:red;
}

Answer 2

只需删除w3-文本-teal。

使用两个不同的类来更改文本颜色是没有意义的。在这种情况下坚持你自己的课。