媒体查询在我输入之前不起作用！重要

Question

我的网站使用 bootstrap 4 和我制作的 css 文件。

在这个 css 文件的底部，我放了一些媒体查询：

@media (max-width: 575px) {
  .address .contact {
    text-align: center;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

@media screen and (min-width:768px) and (max-width:992px){
  .left{
    margin-left: 0;
    width: 100%;
  }

  .picto{
    width: 40%;
  }

}

下面是部分代码：

<section id="section_address" class="container">
        <div class="row">
            <div class="col-12 col-sm-6">
                <div class="address">
                    <h5>ADDRESS</h5>
                    1 street,<br>
                    75000, PARIS
                </div>
            </div>
            <div class="col-12 col-sm-6">
                <div class="contact">
                    <h5>MYCOMPANY</h5>
                    01 11 22 33 44<br>
                    contact@mycompany.com<br>
                    <a href="http://mycompany.com" target="_blank">http://mycompany.com</a>
                </div>
            </div>
        </div>
    </section>

但我的媒体查询不起作用，除非我将!important 添加到每一行。但是我不能对每一行都这样做，而且我已经使用了媒体查询，而且我从来不需要这样做。

Answer 1

在您的 html 页面中，您应该在自定义 css 文件之前引用引导 css 文件。如果不是引导 css 将级联或覆盖您的规则。

Answer 2

确保在所有其他 CSS 之后添加您的自定义 CSS。因为您的自定义 CSS 应该添加在所有其他 CSS 文件之后。从而您的自定义 CSS 将覆盖其他 CSS。

因为 CSS 应用“从上到下”。

谢谢！！！

Answer 3

很可能，您应用了自己的 CSS 类的元素也应用了 Bootstrap 类（如 .row、column、col-12 和许多其他），以及 Bootstrap CSS 规则（尤其是那些结合几个类）具有更高的特异性，这会超过你自己的类。

要获得您想要的结果，请在这些元素上使用浏览器工具/检查器并查看应用了哪个 CSS 类/CSS 规则/选择器。然后创建一个使用相同选择器（类组合）加上您自己的类的规则，这将导致更高的特异性，从而推翻原来的 Bootstrap 规则。

Answer 4

首先，除非万不得已，否则请避免使用!important，这是一种维护风险。

相反，看看如何使您的规则比引导规则更具体。检查 DOM 并查看有问题的规则，然后参考 specificity rules 更新您的选择器，以便它们优先。

关于您新添加的代码：

@media (max-width: 575px) {
  .address .contact {
    text-align: center;
  }
}

这会选择所有.contact 类元素作为“.address”元素的后代。粘贴的代码中不存在此层次结构。

如果你想同时选择它们，那么你需要一个逗号：

@media (max-width: 575px) {
    .address, .contact {
        text-align: center;
     }
}

如果这还不够具体，那么几乎肯定会是：

@media (max-width: 575px) {
    #section_address .address, #section_address .contact {
        text-align: center;
     }
}

除此之外，我在任何地方都看不到.left 或.picto。