2

我有一个简单的 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 全屏显示时，删除边距？

4

1 回答 1

2

编辑：

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

旧答案：

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

具有相同选择器特异性级联的规则；即后来的规则覆盖了早期的规则。

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

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

于 2013-10-15T02:05:15.067 回答