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

Media Query vs Pseudo Class during Fullscreen - CSS Styling Order?

本文关键字：CSS 顺序 样式 查询 媒体      更新时间：2023-09-26

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

编辑：

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

旧答案：

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

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

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

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

相关文章：