Css 什么'；It’最好使用id或！重要吗？

有人会说避免使用！重要的规则是，有人可以说id是唯一的，所以您不需要像

\main>\child

那样瞄准，只需使用

\child

但就我而言：

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

但是使用

！重要信息

将覆盖

或者，使用

#main>#child{

将覆盖

那么，哪一个最好使用呢？

请参阅。它描述了规则顺序

我会尽量避免使用

！important

，因为这是最高的规则，如果你想覆盖它，你可能会发现自己有麻烦

---

对你来说，我建议

#main>#child

尽量避免使用

！重要的

我会选择你的第二个选项。当你使用

！重要的

时，你的css将来的更改将很困难

---

唯一可以覆盖“！important”规则的是另一个规则，该规则必须向下指定，并且其选择器必须具有相同（或更高）的特定级别。

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

例如，要使某些东西变红，最好按以下方式操作：

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

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

<div class="big red">

现在，你可以使用

！重要的

，这样，你就避免使用

ID

s，你最好保留它们，以便

JS

-

DOM操作

使用：）

---

解释更多信息

这是一个糟糕的设计：

HTML

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

因为：

如果您决定以后将

#child

放在层次结构的更高或更低的位置，该怎么办？请注意，许多设计并不像这个示例那样简单

<>代码>主要概念：红色< /代码>或<代码>主体：2EM < /代码>组合？你最好考虑<代码>红色：红色< /代码> <代码>大：2EM < /代码>组合，因为这些更灵活。

---

我希望您了解css的规则：

#main > div{
   color: red;
}
#main > div{ /*last defined rule*/
  color: blue; /*will override*/
}

现在，让我们谈谈你的关键问题： 使用

！important

并不总是坏事。请查看以下代码：

---

我在一个特殊的地方使用它，使IE9像普通浏览器一样保持溢出。在这种情况下，在IE9上，实际上，我不想做

#main>div

，而是在你想要设置样式的

div

上设置一个类（

#main>.hasrerror

）。这也可能会解决你的问题。设置标签样式也是一个不好的做法（如使用！重要）不要在css中使用id选择器。这只会给您带来很多特殊性问题，并且会迫使您频繁使用！重要的或不必要的长选择器。请改用类选择器。@connexo有人这么说，但有人说不要使用！重要的。那么，哪种方法是最好的？正如我所说的，都不要使用。改用类。我知道但是在这两种情况下，你会建议哪一种呢？我知道。但是我想知道哪一种在我的情况下是最好的？正如我所说的，最好只使用类，然后只使用！这对于重写目的很重要。使用

ID

s像

\main>\child>这样的除法，即使是为了重写目的，也是不好的做法如果您以我描述的obove的方式对文档进行样式设置，那么使用！important不会打扰您，当然您最终会得到一个灵活的设计。相信我，今年我已经开发了上千个样式表way@Trix最好使用
！important
。我同意使用id（尤其是选择器中的多个id）使用
！important
是一种不好的做法，比使用
更糟糕1000倍。
<div id="main">
    <div id="child">
    </div>
</div>

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

#main > div{
   color: red;
}
#main > div{ /*last defined rule*/
  color: blue; /*will override*/
}

body {
    overflow:auto !important; /* for all other browsers, the !important is for IE9 */
    overflow:hidden\9; /* for IE<9 */
}

body #child{
    color: purple !important;
}

body div#child{ /*more specific than #main > div */
    color: blue; /*will override*/
}

.parent-class #child{
    color: blue; /* will be the rule*/
}
#main > div{
    color: red;
}

<div style="color: blue !important;">color is always blue</div>