我应该将默认声明与媒体查询样式表放在同一个样式表上吗？答案

【问题标题】：should I put default declaration on the same stylesheet with the media queries stylesheet?我应该将默认声明与媒体查询样式表放在同一个样式表上吗？
【发布时间】：2013-08-16 09:41:13
【问题描述】：

我将默认声明放在style.css 中，然后将所有媒体查询放在名为enhanced.css 的不同样式表中。

例如，我在style.css 中输入了这样的代码：

.box{height: 600px;}

然后我在enhanced.css 中放了一个css 代码，这样当它在较小的屏幕上时，盒子的高度会降低。

@media only screen and (min-width: 320px) and (max-width: 480px) { .box{height:300px;} }

但不幸的是，它在小屏幕上不起作用。它始终遵循style.css 的样式。我的问题是，我可以做上面的事情吗？要将默认声明放在不同的样式表上，还是应该将默认声明 放在与媒体查询样式表相同的样式表上？

谢谢。

【问题讨论】：

你包括style.css 之后 enhanced.css 吗？
您可以将它们放在不同的样式表中（包含它们的顺序有影响）。
是的，我这样做了……有关系吗？
是的。因为它们具有相同的优先级，所以最新包含的优先级将超过。 Reviewing CSS style priority level
@Itay & Adrift 我简直不敢相信……你说得对……我更改了顺序，效果很好……非常感谢！我希望我可以检查您的评论作为答案:)

标签： css media-queries

【解决方案1】：

问题在于您的选择器是相等的specificity（@media 规则没有任何特异性） - 两个规则都使用一个类选择器（.box）并且因为您在加载 .style.css 之后enhanced.css 前者优先。如果您想在常规 .box 规则之前包含它，则需要增加 @media 规则的特异性 - 例如

@media only screen and (min-width: 320px) and (max-width: 480px) {
    body .box {
        height: 300px;
    }

【讨论】：

哦哇...谢谢您的回答..但是您的评论救了我！一切都是为了订购！我简直不敢相信
@ElaYudhanira ：如果这就是您要寻找的答案，您应该接受它（使用绿色的“V”按钮）
这里违反直觉的是，在@media 规则中不会使声明在 CSS 术语中更具体（即使它在直觉上更具体）。 CSS 仅根据选择器定义了特定规则，因此实际上我们可能需要修改选择器以使依赖于媒体的规则覆盖正常规则。