CSS选择器正则表达式匹配开始和结束答案

【问题标题】：CSS selector regex match start and endCSS选择器正则表达式匹配开始和结束
【发布时间】：2022-07-05 15:30:06
【问题描述】：

假设我有具有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 正则表达式选择器选择标题为 custom-marker-wqs-tailrace bbu-l2 的 div？

类似div[title*="customer-marker-wqs...???"] 我不知道应该写什么来代替???

【问题讨论】：

没有“CSS 正则表达式选择器”之类的东西。属性选择器允许“开始于”/“结束于”和类似的选择。

标签： html css

【解决方案1】：

您可以使用单个属性选择器，例如

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

所以你可以匹配确切的字符串，或者你可以链接两个属性选择器，例如

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

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

【讨论】：

非常感谢，这个选择器 div[title^="custom-marker-wqs-tailrace"][title$="bbu-l2"] 拯救了我的一天。

【解决方案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"]

【讨论】：