最后的媒体查询为什么被前面的css覆盖？

Question

我把媒体查询写在最后面，但还是被覆盖了，为什么？
谢谢大家解答！

Answer 1

css 权重问题吧，第一个是 #id+#id 的组合，第二个是 #id，肯定是第一个大啦

Answer 2

回顾知识点

1. 内联样式，如: style="..."，权值为1000。
2. ID选择器，如：#content，权值为0100。
3. 类，伪类、属性选择器，如.content，权值为0010。
4. 类型选择器、伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等。如* > +，权值为0000。
6. 继承的样式没有权值。
   由此可见两个id选择器100+100>100（媒体查询仅一个id选择器）

Answer 3

给媒体查询加点权重,加个标签或者类啥的

Answer 4

权重计算规则
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

个人网站

Answer 5

就是权重的原因
比如：

<div class="list">
    <ul>
        <li>项目</li>
    </ul>
</div> 

样式这样写

.list {
    ul {
        width: 200px;
        li  {
            padding: 10px 20px;
        }
    }
}
@media screen and (max-width: 768px) {
    ul {
        width: 150px;
        li  {
            padding: 5px 10px;
        }
    }

}

这样在屏幕小于768px时媒体查询的样式也不会生效！
因为

.list ul li > ul li

只要在媒体查询里面写相同的样式就不会出现这种问题

@media screen and (max-width: 768px) {
    .list {
        ul {
            width: 150px;
            li  {
                padding: 5px 10px;
            }
        }
    }

}