Question

我的Html代码为FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker

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

要求是我应该将前缀和后缀的文本与数字

匹配

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

Answer 1

您可以将这些要求组合在一起：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

E [foo ^ =＆＃34; bar＆＃34;]一个E元素，其中＆＃34; foo＆＃34;属性值完全开始   用字符串＆＃34; bar＆＃34;

E [foo $ =＆＃34; bar＆＃34;]一个E元素，其中＆＃34; foo＆＃34;属性值完全结束   用字符串＆＃34; bar＆＃34;

以下是一个例子：

＆＃13;

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

＆＃13;

<div id="FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker">one div</div>

＆＃13;

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

2 个答案: