为什么CSS媒体查询不遵循继承和级联的常规约定？

我在CSS3媒体查询中遇到了一些问题

下面是我目前正在研究的一个小片段：

@media only screen 
and (max-width : 420px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

我是从“移动优先”的角度工作的，考虑到CSS在“级联”方面的正常行为，我希望第二个@media语句继承前一个语句的所有样式，同时覆盖它具有匹配或“更重”选择器的任何样式

加上CSS的优先顺序意味着任何匹配的样式定义都将使用最后定义的规则集，除非使用！重要声明

但从我所看到的情况来看，通过测试和一些Google/SE搜索，情况并非如此

@media样式的规则是否可以继承适用的早期语句，或者我是否必须重复每个语句所需的所有规则？不太

---

我非常感谢您的帮助和澄清/解释。

如果您想从mobile up开始工作，您需要将mobile布局设置为默认布局。删除查询。从那里，查询将从上面继承

.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }

 /* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

---

如果要从mobile up开始工作，则需要将mobile布局设置为默认布局。删除查询。从那里，查询将从上面继承

.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }

 /* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

---

首先感谢@BoltClock的两条评论，以及其他评论和答案，感谢您的帮助

我想我在媒体提问中犯了一个错误，或者我没有理解他们是如何一起工作和互动的。我打算用下面的内容来编辑我的问题，但我认为这是一个更有意义的答案，因为这是我使用的解决方案。如果这浪费了其他人的时间，我道歉

下面是我的固定代码片段：

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

从您的评论中我意识到，如果我增加第一个区块的最大宽度以覆盖必要的范围/限制，我可以嵌套或添加第二个区块，然后我尝试了这两种方法，它们都对我有效-使用chromium browser[18.0.1025.151]。这成功地为我提供了所需的结果，即page.alpha元素的字体大小以所需的步进/间隔增加

再次感谢所有帮助过我们的人！ 并感谢他们帮助建立的令人敬畏的社区

---

知识>开源>自由

首先感谢@BoltClock的两条评论，以及其他评论和答案，感谢您的帮助

我想我在媒体提问中犯了一个错误，或者我没有理解他们是如何一起工作和互动的。我打算用下面的内容来编辑我的问题，但我认为这是一个更有意义的答案，因为这是我使用的解决方案。如果这浪费了其他人的时间，我道歉

下面是我的固定代码片段：

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

从您的评论中我意识到，如果我增加第一个区块的最大宽度以覆盖必要的范围/限制，我可以嵌套或添加第二个区块，然后我尝试了这两种方法，它们都对我有效-使用chromium browser[18.0.1025.151]。这成功地为我提供了所需的结果，即page.alpha元素的字体大小以所需的步进/间隔增加

再次感谢所有帮助过我们的人！ 并感谢他们帮助建立的令人敬畏的社区

---

知识>开源>自由

仅供参考更新-我想知道嵌套第二条语句是否可行。它在CSS3规范中，但一些搜索结果表明浏览器还不支持它？这是非常正确的-目前只有Firefox支持它。请参阅。注意，CSS的继承定义在这里不适用，因为@media规则没有任何父子语义。这纯粹是一个级联问题。仅供参考更新-我想知道嵌套第二条语句是否可行。它在CSS3规范中，但一些搜索结果表明浏览器还不支持它？这是非常正确的-目前只有Firefox支持它。请参阅。注意，CSS的继承定义在这里不适用，因为@media规则没有任何父子语义。这是一个纯粹的级联问题。谢谢，我真的很感谢你的移动第一个技巧-我有一些基本风格以外的我的MQ的，但它更有意义，有最小的移动在这里也！虽然这仍然不能解释为什么@media规则没有像其他css规则那样层叠。@克里斯：据我所知，@media max width:420px规则只有在宽度超过420px时才应该停止应用。如果你根本看不到这些规则的生效，那就是出了问题。除此之外，@media规则应该和所有其他规则一样遵循相同的级联。谢谢，我真的很欣赏你的移动第一个技巧-我在MQ之外有一些基本样式，但在这里也有最小的移动样式更有意义！尽管这仍然不能解释为什么@media规则不像其他css规则那样层叠。@Chris：就我所知 呃，@media max width:420px规则只有在宽度超过420px时才应停止应用。如果你根本看不到这些规则的生效，那就是出了问题。除此之外，@media规则应该与所有其他规则遵循相同的级联。