我有这个标记，事先不知道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标记吗？
答案 0 :(得分：7)
您可能需要考虑使用!important伪类来增加选择器的特异性，而不是求助于:not()，如下所示：
div.product:not(#specificity-hack) { background-color: transparent; }
这与原始选择器匹配的元素相同（假设specificity-hack不是产品div的可能ID，这似乎可能在这里），但是从selectors inside :not() are included in the specificity calculation开始，它被认为比你试图覆盖的规则。
（主reason not to use !important if you can avoid it是令人上瘾的 - 覆盖!important规则的唯一方法是另一个 !important规则，所以你使用的越多，你发现自己就越需要它。最终，你的一半CSS规则会被标记为!important，而你基本上都会回到你开始的地方，除了现在你的风格工作表很臃肿，有很多!important个标记，你也有效地剥夺了自己能够在极少数情况下使用!important覆盖正常风格的能力，因为它实际上是合法有用的，现在已经采取如上所示的特殊性黑客。故事的道德：!important功能强大但易于滥用 - 除非你真的有，否则不要使用它到！）
答案 1 :(得分：3)
我认为这是!important可能是最佳选择的情况之一。
#product-20625055 {
background-color: #FC0;
}
#product-66980342 {
background-color: #0CF;
}
#product-54722210 {
background-color: #F0C;
}
div[id^="product-"].product {
background-color: transparent !important;
}<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>
答案 2 :(得分：3)
您的代码段中使用的所有三个id选择器的特异性均为100，而您用来尝试覆盖（div.product[id^="product-"]）的选择器的特异性仅为021（因为它有一个类选择器，一个属性选择器和一个元素类型选择器。
除非您使用其他id选择器作为完整选择器的一部分（在任何地方添加id选择器就足够了），否则无法覆盖id选择器（或）使用{{1} （或）使用内联样式。因为除非添加!important选择器，否则第一个数字将始终为0，因此不会比id选择器更具体。
由于你不能对每个元素的id进行硬编码（因为它是随机的），唯一的选择是将id添加到父元素，然后将其用作选择器的一部分，如我在评论中提到过。 id可以添加到公共父级（或），如果没有父级，则id。
body#product-20625055 {
background-color: #FC0;
}
#product-66980342 {
background-color: #0CF;
}
#product-54722210 {
background-color: #F0C;
}
#id div.product[id^="product-"] {
background-color: transparent;
}
答案 3 :(得分：0)
也许你可以按类选择div（因为它们都有相同的）并添加!important
.product {
background: transparent!important;
}
答案 4 :(得分：0)
使用css！重要功能这在你目前的情况下很有用。但是在使用它时要谨慎不要在你的css文件中过度使用它。它在css中用于覆盖规则。每当你把它放在任何css规则之后！important会确保在你正在使用的任何css文件中的任何地方定义的任何其他规则上使用该规则。
#product-20625055 { background-color: #FC0 !important ; }
#product-66980342 { background-color: #0CF !important ; }
#product-54722210 { background-color: #F0C !important ; }
答案 5 :(得分：0)
直接来自https://developer.mozilla.org/en/docs/Web/CSS/Specificity#The_!important_exception
当样式声明使用！important规则时，这个 声明覆盖任何其他声明。
您可以使用!important覆盖任何css
<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>
#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }
.product {background-color: transparent !important;}
答案 6 :(得分：0)
[id ....] 的属性选择器需要更改为前缀值匹配（[ id ^ =“product”]），因为在应用透明bgcolor之后ID会优先考虑你需要！重要。请参阅下面的html示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
<!--
#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }
div.product[id^="product"] {
background-color: transparent!important;
}
-->
</style>
</head>
<body>
<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>
</body>
</html>
答案 7 :(得分：0)
只需添加到您的body或其他包含products某个ID和
#product-20625055 {
background-color: blue;
}
#wrapper .product[id^="product-"] {
background-color: red;
}<div id="wrapper">
<div class="product" id="product-20625055">Product 1</div>
</div>
答案 8 :(得分：0)
选择器div.product[id*="product-"]将有效！如果您必须重写现有属性，则必须使用!important：
#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }
div.product[id*="product-"] {
background-color: green!important;
}
答案 9 :(得分：-1)
你可以用这个
：nth-child（number）{css declarations;} 例如：
div.product:nth-child(1){
background-color:white;
}
div.product:nth-child(2){
background-color:blue;
}
div.product:nth-child(3){
background-color:yellow;
}
答案 10 :(得分：-3)
您可以覆盖ID选择器使用此代码[id | =＆＃34; product＆＃34;]或div.product：not（#product）选择器：
#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }
/* You Can Use This Selector */
[id|="product"] {
background-color: transparent !important;
}
/* Or This Selector */
div.product:not(#product) { background-color: transparent; }<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div id="product-54722210" class="product">Product 3</div>
另一种做法是在你的CSS中使用类而不是id，因此可以很容易地覆盖它们。
.product-20625055 { background-color: #FC0; }
.product-66980342 { background-color: #0CF; }
.product-54722210 { background-color: #F0C; }
.product { background-color:transparent; }
<div class="product product-20625055" id="product-20625055">Product 1</div>
<div class="product product-66980342" id="product-66980342">Product 2</div>
<div id="product-54722210" class="product product-54722210">Product 3</div>