css 选择器:选择 id 或类，中间有一个随机部分

Question

我正在创建一个模板，该模板将被复制以供使用。 我创建的 css 规则在某些情况下仅适用于模板，因为 cms 会创建一个随机 ID 号并将其添加到 ID/类的中间。

所以我想知道如何选择它们...

结构将是这样的：

<div id="row-123456-StaticPart"> content </div>

而这里的"123456"将是页面的随机生成的ID。因此，如果我复制模板，在下一页上它将是"654321"，例如：

<div id="row-654321-StaticPart"> content </div>

如何编写规则来选择这两个 ID？(手动更改号码除外)

我在想这样的事情：

#row-*-Staticpart {
color: red;
}
or
div[id|="row-*-Staticpart"] {
color: red;
}

提前感谢您的任何想法！

Answer 1

使用 CSS 3 选择器：

div[id^="row-"][id$="-StaticPart"]{
color: red;
}

• div[id^="row-"]选择其 id 属性值以"row-"开头的每个<div>元素
• div[id$="-StaticPart"]选择id 属性值以"-StaticPart"结尾的每个<div>元素

Answer 2

你可以像这样使用 css3 选择器：

div[id^="row-"][id$="-Staticpart"] {
color: red;
}

^= 指示id 应以什么开头，$= 指示它应该以什么结尾。