如何匹配固定前缀带随机后缀的ID元素并应用CSS样式

Drupal AJAX表单会自动给元素ID追加随机哈希后缀，避免AJAX刷新DOM时出现ID冲突，因此精确匹配的固定ID选择器会失效。直接使用CSS原生的属性前缀选择器即可解决，无需额外编写JavaScript。

实现代码 #

CSS提供[attr^="prefix"]前缀匹配选择器，可命中所有指定属性值以给定字符串开头的元素，完全不受后续随机后缀变化影响，替换原有选择器即可：

[id^="edit-field-geolocation-proximity-center-geocoder--"] .form-item {
    margin-top: 0rem;
}

使用说明 #

• 前缀末尾需保留--分隔符，避免误匹配其他同前缀的无关元素
• 该选择器为CSS2.1标准特性，所有主流浏览器全兼容，无需额外适配
• 若样式被其他高优先级规则覆盖，可叠加父级选择器提升权重，例如搭配Drupal暴露筛选表单默认类的写法：

form.views-exposed-form [id^="edit-field-geolocation-proximity-center-geocoder--"] .form-item {
    margin-top: 0rem;
}

• 选择器对AJAX动态插入、刷新生成的DOM元素自动生效，无需在AJAX回调中额外绑定样式

内容的提问来源于stack exchange，提问作者francky