全屏期间的媒体查询与伪类 - CSS样式顺序？答案

【问题标题】：Media Query vs Pseudo Class during Fullscreen - CSS Styling Order?全屏期间的媒体查询与伪类 - CSS样式顺序？
【发布时间】：2013-10-15 12:00:20
【问题描述】：

我有一个简单的 div，我正在设计它以在智能手机上使用响应式设计。我还使用了全屏 API，以便 div 可以全屏显示，无论是在桌面还是移动设备上。

移动版在不全屏时调整菜单栏有边距，但当div全屏时不需要边距。我在下面的实现似乎不起作用 - 边距在全屏和全屏时都被应用。

编辑：正如下面 Lie Ryan 的回答所示，我将 myDiv 的父级设为全屏，而全屏伪类仅适用于全屏元素。

.myDiv
{
    width: 80%;
}

    .myDiv:-webkit-full-screen
    {
        margin-top: 0;
    }

    .myDiv:-moz-full-screen
    {
        margin-top: 0;
    }

    .myDiv:-ms-full-screen
    {
        margin-top: 0;
    }

    .myDiv
    {
        margin-top: 0;
    }

@media screen and (max-width: 480px)
{
    .myDiv
    {
        margin-top: 65px;
    }
}

问：CSS 媒体查询和伪类的应用顺序是什么？如何设置我的 div 样式，以便当 div 全屏显示时，删除边距？

【问题讨论】：

标签： javascript css html

【解决方案1】：

编辑：

我想我现在明白你的问题了。全屏伪选择器应用于您请求全屏的项目而不是 myDiv。比较this jsfiddle (Firefox only)中的三个全屏，只有第一个应用了全屏规则。

旧答案：

问：CSS 媒体查询和伪类的应用顺序是什么？如何设置我的 div 样式，以便当 div 全屏显示时，删除边距？

具有相同选择器特异性级联的规则；即后面的规则会覆盖前面的规则。

选择器特异性较高的规则会优先于选择器特异性较低的规则。选择器特异性是一个相当复杂的话题。但简短的版本是：#id overrules .class overrules tagname overrules * selector。此外，内联样式（即 style= 属性）覆盖了嵌入样式（例如 <head> 内的 <style> 标记），它覆盖了外部样式（即使用 <link> 链接的样式）。

媒体查询或全屏 API 都不会更改级联或特异性规则。

【讨论】：

总结一下：全屏伪类只能用在全屏元素上。如果将 myDiv 设为全屏，则 myDiv 将拥有 .myDiv:fullscreen 可用。
@Dragonseer：你也可以使用一个裸露的:-*-full-screen .myDiv，这样当 .myDiv 的任何父项全屏显示时，该规则就可以使用。