Materialise的CSS加載

我的HTML代碼是這樣 -Materialise的CSS加載

<!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所得到的優先級。讓我知道我該如何解決這個問題。

來源

2016-05-14 Tech Solvr

在materialize.min.css風格的優先級更高，因爲它類.btn.disabled比賽，但你的風格只匹配一個類.btn_apply。更改爲

.btn.btn_apply { 
    ... 
}

然後它將匹配相同數量的類，並且因爲稍後加載文件而具有優先權。

來源

2016-05-14 04:58:14 Barmar

非常感謝，這個工程做順便說一句，我需要使用重要的，每次在重寫CSS一樣 - ！'.btn .btn_apply { \t background：#FFFFFF！important; \t border：1px solid＃9F9F9F！important; }'是工作，但'.btn.btn_apply { \t背景：#FFFFFF; \t border：1px solid＃9F9F9F; }'不是 –

您通常應該儘量避免使用'！important'。只有在沒有其他方法使您的選擇器優先時才使用它。請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Barmar

只需添加.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>

來源

2016-05-14 04:59:11

Materialise的CSS加載

回答

相關問題