Question

标记css的几个答案不鼓励使用!important支持特异性。为什么呢？

Answer 1

您可以使用实际数学来预测，控制和反向设计CSS规则的影响。通过使用!important，你打破了这一点。例如，请查看this JS fiddle，但不使用!important：http://jsfiddle.net/hXPk7/

如果您使用Firebug或Chrome开发工具检查标题元素，其中显示“Richard”，您应按以下顺序查看这些规则：

/**************************/
/* /hXPk7/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/********************************************************/
/* /hXPk7/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

请注意，这不是它们在CSS样式表中出现的顺序 - 而是按照它们的特异性降序排列。首先列出优先级，其他（其规则被更具体的规则覆盖）可能具有划掉的属性。这表明特殊性可以很容易地跟踪（调试？）元素从中获取其CSS属性。

现在，与this JS fiddle进行比较 - 这实际上是相同的，但只有一条新规则现在使用!important：http://jsfiddle.net/hXPk7/1/

使用Firebug或Chrome开发工具检查相同的元素，你会看到如下内容：

/**************************/
/* /hXPk7/1/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/**************************/
/* /hXPk7/1/show/ (line 26) */
/**************************/
span {
    color: black !important;
}

/********************************************************/
/* /hXPk7/1/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

同样，规则是根据其特殊性排序的 - 但请注意，这一次，虽然最先列出的最具体的规则指定color yellow，但浏览器会将文本呈现为黑色！这是因为!important声明打破了特异性的正常行为，优先采用可能难以追踪的方式。想象一个更现实的网站，可能有数百条规则，控制color的网站并不容易找到或改变。</ p>

现在，这可能是开发人员工具的问题，但我认为它反映了!important采用通常易于预测的优先级系统并使其更具挑战性的事实。也许有时候使用它，但它不应该是你编写CSS时的第一个工具。

为什么不鼓励使用`！important`？

1 个答案: