在我的样式之后实现CSS加载

Question

My HTML code is like - 我的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>

As you can see my href="css/style.css" is after the href="node_modules/materialize-css/dist/css/materialize.min.css" but in browser materialize css is overriding my style.css Let me know what I am doing wrong here. 如您所见，我的href="css/style.css"在href="node_modules/materialize-css/dist/css/materialize.min.css"但是在浏览器中，实现CSS覆盖了我的style.css让我知道我在这里做错了什么。

I applied btn_apply class on an anchor tag but somehow materialize classes/css are getting the priorities every time. 我在锚标签上应用了btn_apply类，但是每次实现时，以某种方式实现的类/ css都会获得优先级。 Let me know how I can fix this. 让我知道如何解决此问题。

Answer 1

The style in materialize.min.css is taking priority because it matches two classes .btn.disabled , but your style only matches one class .btn_apply . 优先考虑materialize.min.css的样式，因为它匹配两个类.btn.disabled ，但是您的样式仅匹配一个类.btn_apply 。 Change yours to 更改为

.btn.btn_apply {
    ...
}

Then it will match the same number of classes, and take precedence because the file was loaded later. 然后它将匹配相同数量的类，并具有优先权，因为文件是在以后加载的。

Answer 2

Just add .btn prefix to your .btn_apply class. 只需在.btn_apply类中添加.btn前缀即可。 It's overridden because button has multiple classes btn, disabled . 它被覆盖，因为button具有多个btn, disabled类。

So your btn_apply should look like 所以你的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 个解决方案

解决方案1
2 已采纳 2016-05-14 04:58:14

解决方案2
1 2016-05-14 04:59:11

在我的样式之后实现CSS加载

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-05-14 04:58:14

解决方案2 1 2016-05-14 04:59:11

解决方案1
2 已采纳 2016-05-14 04:58:14

解决方案2
1 2016-05-14 04:59:11