当前位置:首页 > 个人杂谈 > 正文内容

搞懂了CSS与@medid顺序的优先级

作者: 葛屹肃 | 日期: 2022-08-25 | 分类: 个人杂谈

前段时间做的APP下载链接,调试手机端的样式遇到一些问题。这几天有空时,也会试下,也搞懂了一些问题,其中,最主要是CSS与@medid有优先级的,必须将@medid放在后面才行。

搞懂了CSS与@medid顺序的优先级

先看一下错误的例子:

@media screen and (max-width: 768px) {
.post h2 {
width:95%;
}
}

.post h2 {
width:100%;
}

.post h2的宽度永远都是100%,原因是@media是对条件才查询,但是它也遵守css的优先级顺序,后面的样式会覆盖之前的。

正确的例子:

.post h2 {
width:100%;
}

@media screen and (max-width: 768px) {
.post h2 {
width:95%;
}
}

正确的写法是需要将@media放在后面,这样的话,如果条件符合,就会覆盖之前样式。

我是由于没经验,将自己添加的样式都放在后面,而原来样式又有@media screen and (max-width: 768px)的定义,而且是放在前面,我就将手机样式放进去,结果是有些样式能生效,而有些样式一直不生效,原来是@media顺序搞错了。

之后将自己添加的样式放在@media screen and (max-width: 768px)前面,果然发现样式生效。

这就是经验,多尝试下,手机端样式也是可以自己调整。虽然不能达到制作的水平,但是简单修改下样式还是可以做到的。

版权声明:本文由〖一速网〗发布,转载请注明出处!
文章链接:https://www.geyisu.com/2791.html

  • 评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?

◎欢迎大家参与讨论

站内搜索