我有一个简单的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 都不会更改级联或指定规则。