display：フレックスがディスプレイより優先される理由：Chromeではnoneですか？

Question

私はこのようなフレキシボックスのスタイルを持っている：

.myclass { 
    display:flex; 
} 

と、このようなメディアクエリ：

@media (orientation:portrait) { 
    .myclass { 
     display:none; 
    } 
} 

私は要素がポートレートモードでは見えないが、これはそうではないことを期待します。 Chromeでは、メディアクエリがより具体的であっても、flex：が優先されます。

これはなぜですか？

EDIT：これは、メディアクエリがCSSで最初に来る場合にのみ発生します。私のアプリでは、いくつかのSCSSファイルで構成されたかなり複雑なMeteorJSアプリケーションなので、これは避けられません。の後に全く同じメディアクエリを繰り返すと、ディスプレイ：flexはすべて正常に動作します。

Answer 1

あなたの編集によると、あなたのCSSは、実際にはこれはあなたのメディアクエリから表示プロパティが上書きされます。この

@media (orientation:portrait) { 
    .myclass { 
     display:none; 
    } 
} 
.myclass { 
    display:flex; 
} 

のように見えます。

一つのアプローチは、

@media (orientation:portrait) { 
    .myclass { 
     display:none !important; 
    } 
} 

!importantを使用することだろう。しかし、これは他の場所での不要な動作を引き起こす可能性があります。 別のアプローチは、対向するメディアクエリーこのようなあなたのフレックス定義を与えることになります

.myclass { 
    display:none; 
} 

@media (orientation:landscape) { 
    .myclass { 
     display:flex; 
    } 
} 

この要素は常に隠されてしまう方法とメディアクエリが一致した場合のみ表示。