0

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.cssmaterialize.min.cssの属性を上書きしても、materialize.min.cssの属性が適用されてしまいます。具体的には下記のCSSをstyles.cssに追加したところ、この状況になりました。

.card-content{
    max-height: 100%;
}

後に読み込まれた方のCSSで上書きされると考えていましたが、このようなことはなぜおこるのでしょうか。また、後に読み込まれたCSSで上書きするにはどのようにすればいいのでしょうか。

1
  • 実際に確認していませんが、基本的に後のもので上書きされるというのは正しいです。この場合materialize.min.cssのものがより特定されたものであるため適用されないということだと思います。
    – BLUEPIXY
    2016年2月27日 9:42

2 件の回答 2

2

すでに解決していますが、補足させていただきます。

CSSの適用順序は、読み込み順序の他に、詳細度による順序があります。

http://buburinweb.wp.xdomain.jp/css-detailing

今回は、ライブラリ側で .card.small .card-content という指定になっているため、
詳細度の低い .card-content では上書きできませんでした。

従って、以下のように指定すれば、上書きできました。
- .hoge .card-content
- #hoge .card-content

1

.card-contentに対してmax-heightが設定されているのは_cards.scssですが正確には

.card {
    &.small, &.medium, &.large {
        .card-content {
            max-height: 40%;
            overflow: hidden;
        }
    }
}

となっていて最終的なmaterialize.min.cssにも

.card.small .card-content,.card.medium .card-content,.card.large .card-content{max-height:40%;overflow:hidden}

と書かれています。ですのでこれを上書きしたいのであれば

.card.small .card-content, .card.medium .card-content, .card.large .card-content{
    max-height: 100%;
}

などのように記述する必要があります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。