用模式定义CSS选择器

Question

我有以下要素：

<div class="grid">
   <div class="col-1">First Col</div>
   <div class="col-center-2">Second Col</div>
   <div class="col-center-3">third Col</div>
   <div class="col-3">third Col</div>
</div>

我想为所有包含"-center-"字的元素添加类。我如何定义这个选择器？

Answer 1

您可以使用[attr*=value]属性选择器

＆＃13;

＆＃13;

div[class*="-center-"] {
  color: red;
}

＆＃13;

<div class="grid">
  <div class="col-1">First Col</div>
  <div class="col-center-2">Second Col</div>
  <div class="col-center-3">third Col</div>
  <div class="col-3">third Col</div>
</div>

＆＃13;

＆＃13;

＆＃13;