Question

我的HTML代码就像 -

  <!DOCTYPE html>
  <html>
    <head>
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->       
    <link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css"  media="screen,projection" />

        <link type="text/css" rel="stylesheet" href="css/style.css" media="screen,projection" />
    </head>

    <body>
        <div class="container"></div>

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="node_modules/materialize-css/dist/js/materialize.min.js"></script>      
    </body>
  </html>

正如您所看到的，href="css/style.css"位于href="node_modules/materialize-css/dist/css/materialize.min.css"之后，但在浏览器中，实体化css覆盖了我的style.css让我知道我在这里做错了什么。

我在锚标签上应用了btn_apply类，但不知何故实现了类/ css每次都获得优先级。让我知道如何解决这个问题。

Answer 1

materialize.min.css中的样式优先，因为它匹配两个类.btn.disabled，但您的样式只匹配一个类{{1} }。将你的改为

.btn_apply

然后它将匹配相同数量的类，并且优先，因为文件稍后加载。

Answer 2

只需在.btn课程中添加.btn_apply前缀即可。它被覆盖，因为按钮有多个类btn, disabled。

所以你的btn_apply应该是

.btn.btn_apply{  // <== prefix

 }

.btn{
  background: red;
  color: white;
}
.btn.btn_apply{
  background: blue;
}
.btn_apply{
  background: yellow;
}

<button class="btn">.btn</button><br>
<button class="btn btn_apply">.btn.btn_apply</button><br>
<button class="btn_apply">.btn_apply</button>

在我的样式后实现css加载

2 个答案: