如何使用CSS正则选择器匹配指定title属性的div元素

场景示例 #

现有如下带title属性的div元素：

<div title="custom-marker-awlr-tailrace bbu-l2"></div>
<div title="custom-marker-aws-tailrace btut"></div>
<div title="custom-marker-arr-tailrace sbu-l3"></div>
<div title="custom-marker-wqs-tailrace bbu-l2"></div>
<div title="custom-marker-wqs-tailrace bbu-l1"></div>

需要选中title属性值为custom-marker-wqs-tailrace bbu-l2的目标div。

具体写法 #

首先明确：CSS没有支持完整正则语法的选择器，但内置了多类属性值匹配规则，完全可以满足这个选中需求：

1. 精准完全匹配（优先推荐，无匹配误差）
   使用[属性名="属性值"]的完全匹配选择器，直接写全目标title值即可：

   div[title="custom-marker-wqs-tailrace bbu-l2"] {
     /* 在这里写需要应用的样式 */
   }
   

   这种写法只会命中title属性和目标值完全一致的元素，不会误选同前缀的custom-marker-wqs-tailrace bbu-l1、同后缀的custom-marker-awlr-tailrace bbu-l2等其他元素，是最稳妥的方案。

2. 包含匹配（对应你现在用的*=写法）
   你之前写的片段有一处拼写错误：把custom错写成了customer，补全完整的待匹配字符串即可：

   div[title*="custom-marker-wqs-tailrace bbu-l2"] {
     /* 在这里写需要应用的样式 */
   }
   

   这种写法的规则是：只要元素的title属性值中包含括号里的完整字符串，就会被选中。在当前给定的示例里，这个写法也能准确命中目标元素，但如果后续有其他元素的title里也包含这段字符串，就会出现误选，精准度不如完全匹配写法。

其他常用属性匹配规则 #

• 前缀匹配^=：div[title^="custom-marker-wqs"]会选中所有title以custom-marker-wqs开头的div
• 后缀匹配$=：div[title$="bbu-l2"]会选中所有title以bbu-l2结尾的div

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