覆盖CSS媒体查询

Question

我每天都会使用一个页面，它使用了我不喜欢的CSS媒体查询；我更愿意使用整个页面（其中大部分与Twitter Bootstrap菜单在窄于768px时折叠有关）。

有没有一种方法可以用CSS覆盖Bootstrap的媒体查询？最好不要定义自己的媒体查询来逐个覆盖所有规则，因为我觉得这需要很长时间。

编辑： 我不能控制源代码，否则我就会删除bootstrap-responsive代码了。

- Kevin Burke

Answer 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。

- FelipeAls

---

我同意，如果你不喜欢或不需要它们，为什么不彻底删除bootstrap-responsive.css文件呢？ - Jeemusu

我无法控制来源。 - Kevin Burke

Answer 2

我想要覆盖bootstrap的responsive.css。

我的网站有一半需要使用默认的responsive.css，而另一半由于一个媒体查询导致了错误的布局，所以我想要删除它。

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

因此，我将复制responsive.css并删除媒体查询。如果您无法访问源代码，则覆盖可能是唯一的选择。

- citykid

---

CSS 不允许删除已编写的任何东西。您只能覆盖一条指令（使用一个新值，特别是此属性的默认值）。如果该指令在一个媒体查询规则中，则可以通过编写完全相同的条件、相同的选择器、相同的属性和一个新的/默认值（并将其放置在要覆盖的指令之后）来在每种情况或针对此特定 MQ 中进行覆盖。 - FelipeAls