什么是最好使用id或！important？

Question

有人可以说避免使用！重要规则，有人可以说ID是唯一的，因此您不需要定位#main > #child，只需使用#child。

但在我的情况下：

#main > div{
   color: red;
}
#child{
  color: blue;/*won't override*/
}

1. 但使​​用!important会覆盖。
2. 或者，使用#main > #child{将覆盖。

那么，最好使用哪一个？

Answer 1

见this explanation。它描述了规则顺序。

我会尽量避免使用!important，因为它是最高规则，如果你想覆盖它，你可能会遇到麻烦。

对你而言，我建议#main > #child

Answer 2

最佳做法是使用概念而不是内容来定位您的风格。

例如，为了使某些东西变得更好，它就更好：

<div class="red"></idiv>

和CSS：

.red{
    background-color: red;
}

如果它有其他属性如大，或宽或其他东西：

<div class="big red">

和CSS：

.big{
    font-size: 2em;
}
.red{
    background-color: red;
}

现在，有一些东西可以覆盖你，可以使用!important，这样就可以避免使用ID了，你最好保留JS } - DOM Manipulation目的：）

解释更多

这是一个糟糕的设计：

<强> HTML

<div id="main">
    <div id="child">
    </div>
</div>

<强> CSS

#main{
    font-size: 2em;
    background-color: red;
}
#main > #child{
    font-size: 1.5em;
    background-color: blue;
}

，因为：

1. 如果您决定稍后在层次结构中设置#child更高或更低，该怎么办？请注意，许多设计不会像这个例子那么简单！
2. main:red或main:2em组合的概念含义是什么？你考虑red:red＆amp;这些big:2em组合更加灵活。

Answer 3

总是尽量避免使用!important我会选择第二种选择。使用!important时，css的未来变化将很难。

唯一可以覆盖“！important”规则的是另一个规则，它必须在较低的位置指定，并且其选择器必须具有相同（或更高）的特异性级别。