javascript - 在我的样式之后实现 css 加载

标签 javascript html css

我的 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 置于优先级。让我知道如何解决这个问题。

image

最佳答案

materialize.min.css中的样式优先,因为它匹配了两个.btn.disabled,但是你的样式只匹配一个.btn_apply。把你的改成

.btn.btn_apply {
    ...
}

然后它会匹配相同数量的类,并优先,因为文件加载较晚。

关于javascript - 在我的样式之后实现 css 加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37222668/

相关文章:

java - 来自浏览器的延迟/Ping 测试

javascript - 获取用户在 jwplayer 中观看视频的总时间

html - IE 10 将像素添加到行内 block 列表

html - 如何使用CSS从每个第n个元素中删除左边距

javascript - 只读可通过插入的 JavaScript 进行编辑的文本字段?

javascript - 将 Prop 传递给 makeStyles 并在 Material UI 的 CSS 速记属性中使用

javascript - d3 径向条形图中的标签放置

javascript - 从 JSX 元素中提取数据

javascript - Html:是否可以使用 Javascript 实现静态 html 的无限(有限?)滚动?

javascript - Blogger HTML 脚本代码乱码