22600


[Materialize](http://materializecss.com/)というCSSライブラリを使っています。  
HTMLのheadで下記のようにMaterializeをCDNから最初に、自分のCSSファイルを後に読み込んでいます。

[code]

    <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">
    
[/code]

Chromeで確認すると`materialize.min.css`が先に取得され、その後に`styles.css`が取得されています。

しかし、`styles.css`で`materialize.min.css`の属性を上書きしても、`materialize.min.css`の属性が適用されてしまいます。具体的には下記のCSSを`styles.css`に追加したところ、この状況になりました。

[code]

    .card-content{
        max-height: 100%;
    }
    
[/code]

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


CC BY-SA 3.0
2016-02-27T09:34:47.607
22598
2016-09-27T04:42:32.703
7232
question
javascript html css
CSSが順番どおりに適用されない


`.card-content`に対して`max-
height`が設定されているのは[_cards.scss](https://github.com/Dogfalo/materialize/blob/5b75e62d50598ce6446273f9a78a43e14f193d1f/sass/components/_cards.scss#L37-L38)ですが正確には

[code]

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

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

[code]

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

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

[code]

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

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


CC BY-SA 3.0
2016-02-27T09:43:18.870
22600
2016-02-27T09:43:18.870
4236
22598
answer


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

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

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

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

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


CC BY-SA 3.0
2016-09-27T04:42:32.703
29176
2016-09-27T04:42:32.703
18920
22598
answer