@media失效

Vagor
  • 726

图片描述

我在完成这个题目的时候遇到了一个问题。

当我把@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;
    }
}
回复
阅读 8.2k
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放前面还是后面都是无效的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏