如何使用随机的CSS ID样式化元素

Question

我想为我网站上呈现的外部表单（JavaScript）样式化一个ID。问题是，该ID是随机的，例如：

1. 页面刷新一：div#4-register-form-container57287c94e2312
2. 页面刷新二：div#4-register-form-container35469e56e2278
3. 页面刷新三：div#4-register-form-container6575c98e1274
4. 页面刷新四：div#4-register-form-container25242e33e6584
5. 以此类推...

如果我尝试在没有这个随机数字的情况下进行样式化，它将无法正常工作... 是否有可能对其进行样式化？

- bpy

Answer 1

您可以使用starts-with ^= 运算符并将id分组在[]中：-

div[id^="4-register-form-container"] {
  height: 50px;
  border: 1px solid red;
}

<div id="4-register-form-container25242e33e6584">

</div>

- BenG

Answer 2

是的，可以使用CSS选择器，例如[id~="-register-form-container"]。
阅读这里更多关于选择器的内容。

- Jan Franta

Answer 3

使用 [attribute^=value] CSS 选择器。

例如，div[id^="div#4-register-form-container"] - 选择每个元素，其 id 属性值以 div#4-register-form-container 开头。

div[id^="div#4-register-form-container"] {
  color: red;
} 

<div id="div#4-register-form-container57287c94e2312">
  Random div 1
</div>

<div id="div#4-register-form-container35469e56e2278">
  Random div 2
</div>

- Munawir

Answer 4

你可以尝试使用jQuery $('div[id^=div#4-register-form-container]') 或者原生JS document.querySelectorAll('[id^="4-register-form-container"]');。

- Valery K.