我有这个标记,事先不知道ID：
#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }
<div class="product" id="product-20625055">Product 1</div> <div class="product" id="product-66980342">Product 2</div> <div class="product" id="product-54722210">Product 3</div>
我需要更改所有div的背景颜色.这是我能想到的最具体的选择器,但它不起作用：
div.product[id^="product-"] { background-color: transparent; }
这可以在没有硬编码ID的情况下完成,使用！important和更改HTML标记吗？
解决方法
您可能需要考虑使用：not()伪类来增加选择器的特性,而不是诉诸！important,如下所示：
div.product:not(#specificity-hack) { background-color: transparent; }
这与您的原始选择器匹配相同的元素(假设特异性黑客不是产品div的可能ID,这似乎可能在这里),但是从selectors inside :not() are included in the specificity calculation开始,它会比您尝试覆盖的规则更具体.
(主要的reason not to use !important if you can avoid it是令人上瘾的 – 覆盖！重要规则的唯一方法是使用另一个重要规则,因此你使用它越多,你就越发现自己需要它.最终,你的一半CSS规则将是标记！重要,你基本上回到了你开始的地方,除了现在你的样式表充满了许多重要的标记,你也有效地剥夺了自己的使用能力！重要的是覆盖了正常的样式.极少数情况下,它实际上是合法有用的,现在不得不求助于如上所示的特殊黑客.故事的道德：！重要的是强大但容易滥用 – 除非你真的需要,否则不要使用它！)
