为什么我的 custom.css 文件没有修改我的 materialize.css？

Question

我想修改网格系统，为行、列等添加一些边框。我知道，我应该创建单独的文件夹（在我的情况下是 custom.css）并将其写在那里，但看起来我的网站看到了这个文件，但没有看到那里的变化。

我在 custom.css 中试过这个

.row-custom {
   border: 5px solid #42a5f5;
}

只需将 row-custom 添加到 row 类

像这样

  <div class="row row-custom">
  <div class="col s12 ">This div is 12-columns wide on all screen sizes</div>
  <div class="col s6 ">6-columns (one-half)</div>
  <div class="col s6">6-columns (one-half)</div>
  </div>

如果我将 .row-custom 添加到 layout.html 的标题中，它可以正常工作。

这是我的 custom.css 文件： https ://imgur.com/sNy6z9G
这是我在网站来源中的 custom.css 视图： https : //imgur.com/zXKiHxG
（这些 css 我也不得不放入标题中，否则它不起作用，我之前删除了它）

我的标题： https : //imgur.com/fAI72el

另外，我的 materialize.min.css 工作正常。

我不知道为什么 custom.css 源没有变化，我做错了什么？

Answer 1

我编写了相同的代码，并且可以正常工作，问题是，您是否将custom.css导入到文件中？

如果不是，请尝试将其导入，或者将其导入该位置，如下例所示，上面的代码应该可以正常工作

 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Portfolio Blog</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <style> .row-custom { border: 5px solid #42a5f5; } </style> </head> <body> <div class="row row-custom"> <div class="col s12">This div is 12-columns wide on all screen sizes</div> <div class="col s6 ">6-columns (one-half)</div> <div class="col s6">6-columns (one-half)</div> </div> </body> </html>

Answer 2

您是否尝试过将!important添加到css文件中的行中，以便覆盖materializecss.css默认设置？

 .row-custom { border: 5px solid #42a5f5 !important; }

 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <div class="row row-custom"> <div class="col s12">This div is 12-columns wide on all screen sizes</div> <div class="col s6 ">6-columns (one-half)</div> <div class="col s6">6-columns (one-half)</div> </div> </body> </html>

Answer 3

在实现 CSS 中，覆盖 CSS 存在问题，因此请使用!important如下所示。

.row-custom { border: 5px solid #42a5f5 !important; }

为什么我的 custom.css 文件没有修改我的 materialize.css？

问题描述

3 个解决方案

解决方案1
0 2019-02-15 17:38:46

解决方案2
0 2019-02-25 17:19:22

解决方案3
0 2021-11-23 17:25:57

为什么我的 custom.css 文件没有修改我的 materialize.css？

问题描述

3 个解决方案

解决方案1 0 2019-02-15 17:38:46

解决方案2 0 2019-02-25 17:19:22

解决方案3 0 2021-11-23 17:25:57

解决方案1
0 2019-02-15 17:38:46

解决方案2
0 2019-02-25 17:19:22

解决方案3
0 2021-11-23 17:25:57