我会这样做:

[id^="product"] {
  ...
}

理想情况下，使用类。这就是课程的目的:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

现在选择器变成:

.product {
  ...
}

我也想分享这个解决方案，也许将来它能帮助到别人。 正如其他人所说，您可以为id编写[id^=product]

但是我们也可以给这个类一个例子: [class^="product-"]表示以product开头的类 还有* like this [class*="product-"]

这是一个简单的例子:

/* Icons */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mk-font' !important;
  font-size: 3em;
}

祝你好运……

我注意到有另一个CSS选择器做同样的事情。 语法如下:

[id|="name_id"]

这将选择所有以双引号括起来的单词开头的元素ID。

[id^=product]

^=表示“从”开始。相反，$=表示“以”结尾。

这些符号实际上借鉴了Regex语法，其中^和$分别表示“字符串的开始”和“字符串的结束”。

详细信息请参见说明书。

使用属性选择器

[id^=product]{property:value}

我会这样做:

[id^="product"] {
  ...
}

理想情况下，使用类。这就是课程的目的:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

现在选择器变成:

.product {
  ...
}