CSS不工作，W3.CSS覆盖？

我复制了一个W3.CSS模板，我将使用它作为构建我的网页的基础。我正在尝试添加一些自定义CSS来更改文本，但由于某种原因它不起作用？我正在导入W3.CSS之后的自定义CSS文件，所以它会覆盖W3.CSS，但由于某种原因，它会与W3.CSS一起保留... 以下是我的文件和代码： style.css（custom css）：CSS不工作，W3.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不工作的原因...我尝试了我的CSS在一个空白的HTML模板，它的工作，所以W3正在做的事情，但我不知道为什么。

来源

2017-04-30 Ferragus Boulé

首先要检查。如果你把颜色：红色！重要的; - 它会变成红色吗？ – mayersdesign

打开浏览器的检查器，看看它是如何处理CSS的。 – ceejayoz

@ceejayoz什么是浏览器检查器？对不起，我是一种新的HTML –

这应该工作，所以我检查了W3 CSS，它在w3-text-teal上有一个！重要标记，这意味着它将覆盖，不管怎样，除非你在css中包含！important标记。所以你可以做的是：的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; 
}

来源

2017-04-30 13:56:42

！重要的工作，并删除w3文本teal。所以我留下去除w3-text-teal而没有！重要的权利？ –

@FerragusBoulé是的，不要添加任何重要的标签，只需删除w3-text-teal即可。不要使用！重要的，除非你真的必须。 –

CSS不工作，W3.CSS覆盖？

回答

相关问题