将元素 ID 的第一部分和最后一部分与 css 匹配答案

【问题标题】：Match first and last part of an element ID with css将元素 ID 的第一部分和最后一部分与 css 匹配
【发布时间】：2018-03-09 01:57:32
【问题描述】：

我的 HTML 代码是FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker

“FirstStep_customeDates”和“_Value_timepicker”之间的数字会动态变化。

要求是我应该匹配作为数字前缀和后缀的文本

css=a[id^='FirstStep_customeDates' and id$='_Value_timepicker']

【问题讨论】：

请参阅：How do I do X? SO 的期望是，提出问题的用户不仅会进行研究以回答他们自己的问题，还会分享研究、代码尝试和结果。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask

标签： css selenium css-selectors

【解决方案1】：

请参考https://www.w3.org/TR/css3-selectors/

E[foo^="bar"] 一个 E 元素，其 "foo" 属性值正好开始使用字符串“bar”

E[foo$="bar"] 一个 E 元素，其 "foo" 属性值正好结束使用字符串“bar”

这是一个例子：

div[id$="Value_timepicker"] {
  color:red
}

div[id^="FirstStep_CustomDates"] {
  color:blue;
}

&lt;div id="FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker"&gt;one div&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以像这样组合这些要求：

a[id^='FirstStep_CustomDates'][id$='_Value_timepicker'] {
  color: red;
}

<a href="" id="FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker">I should be red</a>
<br>
<a href="" id="FirstStep_CustomDates_e1baeca1-5e06-43f2-9dssdffssdf6fc-5fd3f262c5fd__Value_timepicker">I should be red</a>
<br>
<a href="" id="test">I should not be red</a>

【讨论】：