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

- Meek

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 tricks上找到关于属性模式的非常好的概述。

- Sebastian Brosch

---

哇，没想到它们可以这样结合。非常感谢。 - Meek

Answer 2

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

你需要找到一个以 'col-' 开头的 class，它在第一个 [] 中。 并且以 '-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>

- Ishwar Patil