@media失效
我在完成这个题目的时候遇到了一个问题。
当我把@media内容放在css头部的时候，某些属性生效，但还有些不行。
当我把@media放在css尾部的时候，属性都生效了。
这是为什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="container">
<div class="h120"></div>
<div class="h100"></div>
<div class="h40"></div>
<div class="h200"></div>
</div>
</body>
</html>
css
.container {
display: flex;
height: 500px;
border: 1px solid #999;
align-items: center;
justify-content: space-between;
}
.container div {
width: 150px;
border: 1px solid #f00;
}
.container div:last-child {
border: 1px solid #0f0;
height: 200px;
}
.h120 {
height: 120px;
}
.h100 {
height: 100px;
}
.h40 {
height: 40px;
}
@media (max-width: 640px) {
.container {
flex-wrap: wrap;
align-items: flex-start;
}
.h200 {
border: 1px solid #f00;
order: -1;
}
}
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
IT从业
首先，当media放尾部时，并没有完全生效，.h200的边框颜色并没有生效。
这个问题在于CSS选择器优先级。具体规则就不讲了，请搜索CSS选择器优先级。
当@media放前面，@media里的样式生效时.container { flex-wrap: wrap; align-items: flex-start; }此代码选择器的优先级与
.container { display: flex; height: 500px; border: 1px solid #999; align-items: center; justify-content: space-between; }的优先级一样，放后面的有效，所以你的media里的代码无效。
而在div.h200中，@media里的样式选择器.h200比.container div:last-child优先级低，所以无论@meida放前面还是后面都是无效的2019-07-17 19:32:15赞同 展开评论
相关问答