MaterializeというCSSライブラリを使っています。
HTMLのheadで下記のようにMaterializeをCDNから最初に、自分のCSSファイルを後に読み込んでいます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/styles/styles.css">
Chromeで確認するとmaterialize.min.css
が先に取得され、その後にstyles.css
が取得されています。
しかし、styles.css
でmaterialize.min.css
の属性を上書きしても、materialize.min.css
の属性が適用されてしまいます。具体的には下記のCSSをstyles.css
に追加したところ、この状況になりました。
.card-content{
max-height: 100%;
}
後に読み込まれた方のCSSで上書きされると考えていましたが、このようなことはなぜおこるのでしょうか。また、後に読み込まれたCSSで上書きするにはどのようにすればいいのでしょうか。
materialize.min.css
のものがより特定されたものであるため適用されないということだと思います。