css - 如何避免使用 !important？

Question

我正在努力使我的网站响应迅速。但是，当我使用另一个媒体查询时，很多事情都不起作用。例如:

(普通 CSS)

div#divName
{
    font-size:1em;
}

(媒体查询代码)

@media screen and (max-width: 320px) 
{
    div#divName
    {
        font-size:.5em;
    }
}

这行不通。只有当我在它后面使用“!important”时它才有效。但我不知道这是正确的还是“错误的”。谁能告诉我如何解决这个问题？

Answer 1

所有 !important 所做的就是增加 specificity .为避免使用 !important，您需要做的就是提高特异性。

在您的情况下，您的两个选择器都具有相同的特异性。该问题很可能是由于您的媒体查询被放置在您的“普通 CSS”之前，因此被覆盖造成的。

1. 如果它们在同一个 CSS 文件中，请确保将“普通 CSS”放在媒体查询之前。
2. 如果它们位于不同的 CSS 文件中，请确保包含媒体查询的文件包含在您的 HTML 文档中您的“普通 CSS”之后。