媒体查询与伪类在全屏幕- CSS样式顺序？
媒体查询与伪类在全屏幕- CSS样式顺序？
提问于 2013-10-15 01:55:04
我有一个简单的div，我是为响应智能手机的设计使用样式。我还使用了全屏API，这样div就可以变成全屏，无论是在桌面上还是在移动平台上。
移动版本调整时，菜单栏时，没有全屏边距，但没有必要的边缘，当div是全屏。我在下面的插入看起来不起作用--这个边距在全屏和全屏上都会被应用。
编辑：正如Lie下面的回答所示，我是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转到全屏时，边距被移除？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-15 02:05:15
编辑：
我想我明白你现在的问题了。全屏伪选择器应用于您请求的全屏项目，而不是myDiv。比较这个小提琴手(只限于火狐)中的三个全屏幕，只有第一个应用了全屏规则。
旧答案：
问: CSS媒体查询和伪类的应用顺序是什么？如何设置div的样式，以便当div转到全屏时，边距被移除？
具有相同选择器特性的规则级联；即后面的规则覆盖先前的规则。
具有较高选择器特异性的规则超过了具有较低选择器特定性的规则。选择器的特殊性是一个相当复杂的主题；但简短的版本是：#id重写了.class，覆盖了标签名，超限了*选择器。此外，内联样式(即style=属性)对嵌入样式(例如，<head>中的<style>标记)进行了超限，这将覆盖外部样式(即使用<link>链接的样式)。
媒体查询或全屏API都不改变级联规则或特定规则。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19372107
复制相关文章
相似问题
腾讯云开发者
