Question

如何将CSS规则指定为！important ，其中值为逗号分隔列表（例如可以用于背景， box-shadow 或 text-shadow ）。我是否为每个列表项单独或仅在最后一项之后添加！important 标记？

总结一下，我写下

background: url(image1.png) no-repeat 0 1px,
            url(image2.png) no-repeat 0 2px !important;

或

background: url(image1.png) no-repeat 0 1px !important,
            url(image2.png) no-repeat 0 2px !important;

Answer 1

您需要在结束分号前放置!important。

请注意，它可以覆盖属性值作为一个整体，而不是它的各个组件 - 所以它不能应用于单独的逗号分隔参数（事实上，这将是一个毫无意义的练习，因为你在逻辑上只需要一个论点，你正在重要的一个。）

即说明per MDN，建议不要使用!important：

重要的例外

当样式声明使用！important规则时，这个   声明覆盖CSS中的任何其他声明，无论在何处   它在声明列表中。虽然，！重要无关   具有特异性。使用！important是不好的做法，因为它使   你努力调试，因为你打破了你的自然级联   样式表。

一些经验法则



永远不要在网站范围内使用！important。



仅使用！important on   特定于页面的css，它覆盖了站点范围或外来的css（来自ExtJs   或者例如YUI。）



在写作时，切勿使用！important   插件/混搭。



在偶数之前总是寻找一种使用特异性的方法   考虑！重要

Answer 2

您需要将!important放在您希望应用此规则的每一行的末尾。所以，要回答你的问题，你的第二个例子是你将如何做到这一点。

但是不推荐使用!important，它会创建草率不佳的代码，使其不易维护，并覆盖用户样式表中声明的样式，从而降低可访问性。

带有列表值的CSS！重要规则

2 个答案: