使用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标记来完成这个操作吗？

- Salman A

---

包含 #id 选择器的选择器是最具体的，因为它们是唯一的。如果您真的无法遵循标准 CSS 指南并删除 id 选择器，则必须不遵循标准 CSS 指南并使用 !important。它并不总是邪恶的。 - Rhumborl

你可以将特定的背景颜色标签移动到一个 before 的 CSS 元素中，并使用你的 .product 类来覆盖它们。 - Kao

三个 id 选择器的特异性为 100，而 div.product[id^="product-"] 的特异性仅为 021，因此不会覆盖背景颜色。您需要使用一个 id 选择器才有可能在不使用硬编码/important 的情况下进行覆盖。因此，您可以将一个 id 分配给 body 并使用 #id div.product[id^="product-"]。 - Harry

Answer 1

不要使用!important，你可以考虑使用:not()伪类来增加选择器的特异性，像这样：

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

这与您原始选择器匹配相同的元素（假设specificity-hack不是产品div的可能ID，这在这里似乎很可能），但由于{{link1：:not()内部的选择器包含在特异性计算中}}，它被视为比您尝试覆盖的规则更具体。

主要的原因 不使用!important如果可以避免的话是它会让人上瘾——覆盖一个!important规则的唯一方法是使用另一个!important规则，所以你使用得越多，你就越发现自己需要它。最终，你的一半CSS规则将被标记为!important，你基本上回到了起点，只是现在你的样式表中充斥着许多!important标记，并且你还有效地剥夺了自己在极少数情况下实际上需要使用!important来覆盖正常样式的能力，现在必须采用像上面展示的特殊性hack。故事的寓意是：!important很强大，但容易被滥用——除非你真的必须使用它！

- Ilmari Karonen

---

有趣的是，在你评论我的答案之后不久就被问到了这个问题。我也很欣赏选择器叫做 :not(#specificity-hack) 的讽刺意味。 - BoltClock

Answer 2

我认为这是一种情况，!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>

- Paulie_D

Answer 3

你的代码片段中使用的所有三个id选择器的特异性都是100，而你试图覆盖的选择器（div.product[id^="product-"]）只有021的特异性（因为它有一个类选择器，一个属性选择器和一个元素类型选择器）。除非你使用另一个id选择器作为完整选择器的一部分（在任何位置添加一个id选择器即可）（或）使用!important（或）使用内联样式，否则你无法覆盖id选择器。因为除非添加一个id选择器，否则第一个数字将始终为0，因此比id选择器不够具体。由于你不能硬编码每个元素的id（因为它是随机的），唯一的选择就是向父元素添加id，然后像我在评论中提到的那样将其用作选择器的一部分。id可以添加到共同的父级（或）如果没有父级，则添加到。

#product-20625055 {
  background-color: #FC0;
}
#product-66980342 {
  background-color: #0CF;
}
#product-54722210 {
  background-color: #F0C;
}
#id div.product[id^="product-"] {
  background-color: transparent;
}

<div id='id'>
  <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>

- Harry

---

一个好的解决方法，当我写评论时我没有想到这个，但这涉及到更改标记（无论这对于OP是否真的不可能，或者只是因为某种原因，我不知道）。 - Rhumborl

@Rhumborl 不需要更改标记（我的意思是不需要更改HTML文件本身），因为可以通过其他方式添加id。此外，OP说不要硬编码id，也不要使用!important，所以唯一的方法是将id选择器作为复杂选择器的一部分添加。 - Harry

这是一个不错的第二选择（如果我能控制父元素，那么它将是第一选择）。 - Salman A

@SalmanA：没错，我了解你的意思。Ilmari的回答非常适合你的情况 :) - Harry

Answer 4

也许你可以通过类名选择 div 元素（因为它们都是相同的），然后添加 !important。

.product {
   background: transparent!important;
}

- Marcel Wasilewski

Answer 5

使用CSS的!important特性，在您目前所处的情况下非常有用。但是在使用时要小心，不要在CSS文件中过度使用它。它用于覆盖规则。无论何时在任何CSS规则之后放置它，!important都会确保使用该规则而不是在您使用的任何CSS文件中定义的其他规则。

#product-20625055 { background-color: #FC0 !important ; }
#product-66980342 { background-color: #0CF !important ; }
#product-54722210 { background-color: #F0C !important ; }

- Anant Gulia

Answer 6

直接来自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;}

- ARIF MAHMUD RANA

Answer 7

需要修改[id....]的属性选择器，以进行前缀值匹配（[id^="product"]），另外由于ID会优先考虑，因此在应用透明背景色后需要添加!important。请参见下面的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>

- SHOGUN.IO

Answer 8

选择器 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;
}

jsfiddle-link

- Igor Ivancha

Answer 9

只需在包含您的产品的body或其他元素中添加一些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>

- Narek-T

Answer 10

你可以使用这个：

:nth-child(number) {css声明;} 例如：

div.product:nth-child(1){ 
background-color:white; 
}

div.product:nth-child(2){ 
background-color:blue; 
}

div.product:nth-child(3){ 
background-color:yellow; 
}

- Salman Aziz