我如何避免使用！important？

Question

我正在尝试让我的网站响应。但是，当我使用其他媒体查询时，很多事情都无法奏效。例如：

（普通CSS）

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

（媒体查询代码）

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

这不起作用。它只适用于我使用＆＃34;！important＆＃34;在它背后。但我不知道这是否正确或错误＆＃34;。谁能告诉我如何解决这个问题呢？

Answer 1

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

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

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

Answer 2

确保您要在之后覆盖加载的CSS规则。
在你的情况下

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

应首先加载

，然后加载：

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

您希望有两个独立的文件style.css和responsive.css，并按以下顺序包含它们：

<link href="style.css" rel="stylesheet" /> 
<link href="responsive.css" rel="stylesheet" />