覆盖CSS媒体查询

Question

我每天使用一个页面,使用我不喜欢的CSS媒体查询; 我宁愿使用整页(大多数都与Twitter Bootstrap菜单相关,当比768px窄时).

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

编辑:我没有源代码的控制权,否则我只是杀死引导响应代码.

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块外的任何声明都将覆盖内部的声明,例如,有3个原因可以应用value2而不是value1.