CSS - media query样式不生效，被划掉

淡淡的烟草味﹌ 2022-12-20 00:30 172阅读 0赞

# 问题： #

@media only screen and (max-width: 1200px) {
      .car-list {
        width: 300px;
        background-color: white;
      }
    }
    .car-list {
      width: 350px;
      height: calc(100vh - 80px);
      display: flex;
      flex-direction: column;
      background-color: #01183f;
      position: absolute;
      margin: 10px 0;
      left: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      transition: all 0.3s;
      box-shadow: 0px 0px 10px 1px #2977a4 inset;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

样式被划掉，没有生效；

# 解决： #

*  **给media query添加“!important”，提升优先级。**

@media only screen and (max-width: 1200px) {
      .car-list {
        width: 300px !important;
        background-color: white !important;
      }
    }

*  **在media query的样式前添加父级的类名（或id），也可以使其占据主导地位**

@media only screen and (max-width: 1200px) {
      .map-dialog {
        .car-list {
          width: 300px;
          background-color: white;
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20221120/c4b048527dd24634a30921aa0cf6b314.png

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS - media query样式不生效，被划掉

问题： @media only screen and (max-width: 1200px) { .car-list { width:

淡淡的烟草味﹌/ 2022年12月20日 00:30/ 0 赞/ 173 阅读

相关 vue打印局部区域样式CSS错乱不生效

最近vue项目要实现打印网页中局部区域的要求，但是用下列方式的时候显得样式全部都没有作用上 printContent(){ let subOutp

绝地灬酷狼/ 2022年12月08日 02:09/ 0 赞/ 418 阅读

相关 Targeting High Screen Densities with CSS Media Queries

From [http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/

骑猪看日落/ 2022年09月20日 15:21/ 0 赞/ 181 阅读

相关 CSS3 之媒体查询Media Query

　　Media Queries是CSS3有关媒体查询的属性，有了CSS3 之媒体查询Media Queries就可以进行媒体查询，针对每个不同的媒体进行不同的样式编写。传说中的

旧城等待，/ 2022年09月17日 05:30/ 0 赞/ 288 阅读

相关 JavaScript media queries

译自 MDN [https://developer.mozilla.org/en-US/docs/Web/CSS/Media\_Queries/Testing\_media\_

墨蓝/ 2022年07月12日 06:07/ 0 赞/ 173 阅读

相关 CSS3 media queries

译自 MDN [https://developer.mozilla.org/en-US/docs/Web/CSS/Media\_Queries/Using\_media\_qu

矫情吗；*/ 2022年07月12日 05:59/ 0 赞/ 187 阅读

相关 CSS3系列四（Media Queries移动设备样式）

viewport设置适应移动设备屏幕大小 viewport：允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能 <meta name="viewport"

系统管理员/ 2022年04月10日 09:56/ 0 赞/ 197 阅读

相关【前端】保证css样式不被污染

前言在前端开发中，如何保证一个页面的样式不污染其他页面的样式呢？以Vue举例，我们会用到scoped属性。什么是scoped 在Vue的style中，

迈不过友情╰/ 2021年12月10日 12:15/ 0 赞/ 645 阅读

相关使用CSS3 Media Queries实现网页自适应

原文来源：[http://webdesignerwall.com][http_webdesignerwall.com] 翻译：[http://xinyo.org][http_

叁歲伎倆/ 2021年09月15日 06:56/ 0 赞/ 509 阅读

相关在学习media做适配时，and后面未空格，样式不生效，

原代码 ![在这里插入图片描述][20210204111902326.png] 正确代码应为： ![在这里插入图片描述][20210204111907955.png]

淩亂°似流年/ 2021年07月25日 11:49/ 0 赞/ 205 阅读