覆盖 CSS 媒体查询

Posted 2023-03-06

【中文标题】覆盖 CSS 媒体查询

【英文标题】：Override CSS media queries

【发布时间】：2012-07-10 15:11:21

【问题描述】：

我每天都在处理一个使用我不喜欢的 CSS 媒体查询的页面；我宁愿使用整页（其中大多数与 Twitter Bootstrap 菜单在窄于 768 像素时折叠有关）。

有没有办法用 CSS 覆盖 Bootstrap 的媒体查询？最好不要定义我自己的媒体查询来单独覆盖所有规则，因为我觉得这需要很长时间。

编辑：我无法控制源代码，否则我只会杀死引导响应代码。

【参考方案1】：

您为什么不首先删除它们？

如果不能，您仍然可以使用规则覆盖 CSS 声明：

具有相同的选择器优先级并

在

MQ 块之后 比 MQ 块中的规则具有

更高的选择器优先级

在值和分号之间有

!important

    /* one id, one class AND one element => higher priority */
    #id element.class  property: value2; 

    /* !important will nuke priorities. Same side effects as a nuke,
       don't do that at home except if you've tried other methods */
    #id .class  property: value2 !important; 

    @media(blah) 
      /* Overridden. Thrice. */
      #id .class  property: value1; 
    

    /* same selector, same everything except it comes after the one in @media?
       Then the latter is applied.
       Being in a @media doesn't give any more priority (but it won't be applied
       everywhere, depending on "blah", that's the point of MQ) */
    #id .class  property: value2; 

在前面的示例中，@media 块之外的任何声明都将覆盖内部的声明，例如应用 value2 而不是 value1 的原因有 3 个。

【讨论】：

我同意，如果您不喜欢/不需要它们，为什么不完全删除 bootstrap-responsive.css 文件？

我无法控制源代码。

【参考方案2】：

也想覆盖 bootstraps responsive.css。

我有一半的网站要使用默认的 responsive.css，而另一半的媒体查询会导致布局错误，因此我想将其删除。

根据我的研究css 不允许删除媒体查询。

所以我会去复制 responsive.css 并删除媒体查询。如果您无权访问源代码，则覆盖可能是唯一的选择。

【讨论】：

CSS 不允许在编写后删除任何内容。您只能覆盖一条指令（使用新值，特别是此属性的默认值）。如果该指令位于媒体查询中的规则中，您可以通过为该 MQ、相同的选择器、相同的属性和新的/默认值（并放置它在被覆盖的指令之后）