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

【问题标题】：Why my custom.css file isn't modifying my materialize.css?为什么我的 custom.css 文件没有修改我的 materialize.css？
【发布时间】：2019-01-31 01:05:49
【问题描述】：

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

我在 custom.css 中试过这个

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

只需将行自定义添加到行类

这样

  <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我也必须放到header中，否则它不起作用，我之前删除了它）

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

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

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

【问题讨论】：

我不明白这与 django 有什么关系？没有css的标签。
我认为 Django 搞砸了

标签： css materialize

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

我已经解决了这个问题。我已将“custom.css”的名称更改为“main.css”，一切正常。不知道为什么

【解决方案3】：

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

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

【讨论】：