如何在以下示例中摆脱!important标记?
<html><head><style>
.class1.class2::after {
content: ".class1.class2";
}
.class3::after {
content: ".class3" !important;
/* how do we make this higher priority without "!important"? */
}
td {padding-right: 20px;}
</style></head>
<body>
<table>
<tr><td>class1 class2</td><td><div class="class1 class2"></div></td></tr>
<tr><td>class1 class2 class3</td><td><div class="class1 class2 class3"></div></td></tr>
</table>
</body></html>我知道CSS中有3个规则优先机制:
-
特异性． 上面例子的问题是，根据浏览器的特异性算法，
.class1.class2被认为更"特定";比.class3。因此，专一性在这里不是很合适，因为浏览器在.class1.class2和.class3之间创造了一种不合逻辑的关系。 -
声明顺序似乎也行不通:因为专用性优先于声明顺序，所以规则的编写顺序无关紧要。
-
!重要的． 但它是不受欢迎的(如果你能告诉我为什么不受欢迎，这可能会给我们一些启发)。如果我希望
.class3在上面的例子中具有更高的优先级，我可以避免!important吗?
正如你已经提到的，它归结为特异性． 您可以修改CSS，使.class3条目更具体，并添加原始选择器.class1.class2.class3::after, .class3::after。
.class1.class2.class3将覆盖.class1.class2，因为前者包含后者。
我认为!important纯粹是不受欢迎的，因为它看起来有点像一个hack/变通方法，在没有正确格式化和编写的CSS的情况下强制使用特定的样式。
<html>
<head>
<style>
.class1.class2::after {
content: ".class1.class2";
}
.class1.class2.class3::after,
.class3::after {
content: ".class3";
}
td {
padding-right: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>class1 class2</td>
<td>
<div class="class1 class2"></div>
</td>
</tr>
<tr>
<td>class1 class2 class3</td>
<td>
<div class="class1 class2 class3"></div>
</td>
</tr>
</table>
</body>
</html>重要标志(!important)被"皱眉";因为它经常被用作良好编码实践的替代品。
它可以被看作是鼓励草率的代码，因为最后，"我们可以直接使用!important">。
然而，这种做法最终会导致这样的问题:如何重写!important?但是，如果你已经编写了高质量的代码，或者你试图重写超出你控制范围的代码(例如，WordPress)，或者你需要更改一个页面，而不是整个网站，那么重要标志可以是一个方便的工具。
底线，!important在正确使用时没有任何问题。它的存在是有原因的。