Question

我需要更改一些类名。

现在，班级名称只是.col

所以我有一些看起来像这样的CSS：

.col {width:50%};

现在......我有一些看起来像这样的课程：

.one-col {something here};
.two-col {something here};

如何更改.col {};所以它针对任何看起来像上面那样的？

Answer 1

使用包含选择器

[class*="-col"] {width:50%};

Answer 2

您可以将这两个类添加到所需的元素中，以便从两个类继承属性。

<div class="col one-col">...</div>

或者（虽然看起来不错，因为它依赖于类应用于元素的顺序），但 ends-with 属性选择器。< / p>

[class $= "-col"] {width:50%}

Answer 3

您可以像这样使用部分选择器*：

[class*="col"]{
  height: 50px;
  background: #333;
}
.one-col {
  background: blue;
}
.two-col {
  background: red;
}

<div class="asas-col-asadas"></div>
<div class="one-col"></div>
<div class="two-col"></div>