245

如果 HTML 有这样的元素：

id="product42"
id="product43"
...

如何匹配所有以“产品”开头的 id？

我已经看到完全使用 javascript 执行此操作的答案，但是如何仅使用 CSS 来执行此操作？

4

5 回答 5

445 
[id^=product]

^=表示“开始于”。反之，$=表示“以”结尾。

这些符号实际上是从 Regex 语法中借用的，其中^和$分别表示“字符串开头”和“字符串结尾”。

有关完整信息，请参阅规格。

于 2012-07-15T23:58:57.283 回答
75

我会这样做：

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

理想情况下，使用一个类。这就是类的用途：

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

现在选择器变为：

.product {
  ...
}
于 2012-07-15T23:58:09.230 回答
7

使用属性选择器

[id^=product]{property:value}
于 2012-07-15T23:58:25.740 回答
2

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

但是我们也可以举一个例子class： [class^="product-"]这表明类以产品开头，也*像这样[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;
}

祝你好运 ...

于 2021-04-26T11:30:47.387 回答
0

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

[id|="name_id"]

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

于 2016-09-15T10:55:54.847 回答