我的 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
让我知道我在这里做错了什么。
我在 anchor 标记上应用了 btn_apply
类,但不知何故每次都将具体化类/css 置于优先级。让我知道如何解决这个问题。
最佳答案
materialize.min.css
中的样式优先,因为它匹配了两个类.btn.disabled
,但是你的样式只匹配一个类.btn_apply
。把你的改成
.btn.btn_apply {
...
}
然后它会匹配相同数量的类,并优先,因为文件加载较晚。
关于javascript - 在我的样式之后实现 css 加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37222668/