Question

我复制了一个W3.CSS模板，我将它用作构建我的网页的基础。我试图添加一些自定义CSS来更改文本，但由于某种原因它不起作用？我在W3.CSS之后导入自定义CSS文件，因此它将覆盖W3.CSS但由于某种原因它坚持使用W3.CSS ... 这是我的文件和代码： style.css（custom 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上有一个！important标签，这意味着无论如何它都会覆盖，除非你在css中包含一个！important标签。所以你能做的是： style.css中：

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

除非你真的需要，否则你永远不应该使用！important。但是因为W3.css显然使用了很多，所以你必须使用当前的设置。您还可以从标记中删除w3-text-teal类，它也可以使用，而无需添加！important标记。我建议这样做，因为你不必使用！important标签。

<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-text-teal。

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

Answer 3

我知道这已经晚了几个月，但是覆盖W3.CSS代码时您还应该考虑的另一个因素是，覆盖必须遵循文档中已经存在的所有外部电子表格。换句话说，在外部样式表之后，内部样式表必须与您的“头部”看起来像这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Aux02 - Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
.local-display-bottommiddle {
    position: absolute;
    left: 0;
    bottom: 0;
}
</style>
</head>

顺便说一句，您可能会从选择器中猜到，我稍微重命名了W3.CSS类的本地变体，以使它们明显位于内部样式表中，但您可以使类名保持不变，而本地覆盖仍然应该优先于外部样式表中的代码。

我也是W3.CSS的新手，所以如果我错了，我希望有更多专业知识的人能纠正我！

CSS无效，W3.CSS覆盖？

3 个答案: