类名中的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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>解释

• [class^="col-"]：课程必须以col-开头。
• [class$="-12"]：课程必须以-12结尾。

您可以找到属性模式on CSS tricks的非常好的概述。

Answer 2

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

您基本上正在寻找一个以'col-'开头[]的课程。 以'-12'中的[]结尾。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;