类名中的 CSS 选择器通配符答案

【问题标题】：CSS selector wildcard inside class name类名中的 CSS 选择器通配符
【发布时间】：2018-08-17 18:38:28
【问题描述】：

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

例如像这样的类：

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

但不是类，例如：

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

我尝试过类似这样的东西，但它不起作用：

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

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

您基本上是在寻找一个以'col-' 开头的类，第一个[]。并在第二个[] 以'-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>

【讨论】：

【解决方案2】：

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

[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结尾。

你可以找到一个很好的属性模式概览on CSS tricks。

【讨论】：

哇，不知道它们可以这样组合。非常感谢。