CSS选择器regex匹配开始和结束

Question

假设我有具有title属性的元素，如下所示

<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>

如何使用CSS regex选择器选择带有标题的div custom-marker-wqs-tailrace bbu-l2？

有点像div[title*="customer-marker-wqs...???"]，我不知道该写什么来代替？

Answer 1

您可以使用单个属性选择器。

div[title="custom-marker-wqs-tailrace bbu-l2"] {
  ...
}

因此，您可以匹配确切的字符串，或者您可以链接两个属性选择器。

div[title^="custom-marker-wqs-tailrace"][title$="bbu-l2"] {
   ...
}

通过选择以^=开头的标题( custom-marker-wqs-tailrace )和以bbu-l2结尾的标题($=)

Answer 2

你知道吗？https://developer.mozilla.org/en/docs/Web/CSS/CSS_Selectors，但你很亲近：

startsWith: div[title^="customer-marker-wqs"]
endsWith:   div[title$="customer-marker-wqs"]
contains:   div[title*="customer-marker-wqs"]