Question

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

Answer 1

修改

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

OLD ANSWER：

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

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

具有较高选择器特异性的规则会否决具有较低选择器特定性的规则。选择器特异性是一个相当复杂的主题;但是短版本是：#id overrules .class overrules tagname overrules * selector。此外，内联样式（即style = attribute）否决了嵌入式样式（例如<style>内的<head>标记），它取代了外部样式（即使用<link>链接的样式）。

媒体查询或全屏API都不会更改级联或指定规则。

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

1 个答案: