类名内的CSS选择器通配符

Question

我想知道是否可以定位所有以开头col-和结尾开头的类12吗？

例如类似的类：

.col-sm-12
.col-md-12
.col-lg-12

但不是类似的类：

.col-sm-8
.col-lg-6

我尝试了类似的东西，但不起作用：

[class^="col-*-12"] {
    border: 1px solid red;
}

Answer 1

您可以使用以下解决方案：

[class^="col-"][class$="-12"] {
    color:red;
}

<span class="col-lg-12">col-lg-12</span>
<span class="col-md-12">col-md-12</span>
<span class="col-lg-8">col-lg-8</span>
<span class="col-md-9">col-md-9</span>

说明：

• [class^="col-"]：上课必须从开始col-。
• [class$="-12"]：上课必须以-12。

您可以在CSS技巧上找到有关属性模式的很好的概述。

Answer 2

[class^="col-"][class$="-12"]就是你想要的。

'col-'您基本上是在寻找以in first开头的课程[]。'-12'并以第二个结尾[]。

[class^="col-"][class$="-12"] {
 color : red;
}

<div class='col-sm-12'>col-sm-12</div>
<div class='col-md-12'>col-md-12</div>
<div class='col-lg-12'>col-lg-12</div>


<div class='col-lg-6'>col-lg-6</div>
<div class='col-lg-8'>col-lg-8</div>