使用CSS随机生成ID选择元素

Question

我有这个标记,事先不知道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标记的情况下完成吗？

Answer 1

!important您可能需要考虑使用:not()伪类来增加选择器的特性,而不是诉诸于此,如下所示:

div.product:not(#specificity-hack) { background-color: transparent; }

这匹配与原始选择器相同的元素(假设这specificity-hack不是产品div的可能ID,这似乎可能在这里),但由于内部:not()的选择器包含在特异性计算中,因此它比您规则更具体.试图覆盖.

(如果你可以避免它,不使用的主要原因!important是它上瘾 - 覆盖!important规则的唯一方法是使用另一条 !important规则,因此你使用它越多,你发现自己需要的越多.最终,你的一半CSS规则将被标记!important,你基本上回到你开始的地方,除了现在你的样式表有很多!important标记膨胀,你也有效地剥夺了自己!important在极少数情况下使用覆盖正常样式的能力它实际上是合法有用的,现在不得不求助于如上所示的特殊黑客.故事的道德:!important强大但容易滥用 - 除非你真的需要,否则不要使用它!)