css - @media失效
本文介绍了css - @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;
}
}
解决方案
首先，当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放前面还是后面都是无效的
这篇关于css - @media失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
