类名内的CSS选择器通配符 [英] CSS selector wildcard inside class name

问题描述

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

I would like to know if it's possible to target all classes that starts with col- and ends with 12 only?

例如这样的类：

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

但不是类，例如：

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

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

I tried with something like this which is not working:

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

推荐答案

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

You can use the following solution:

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

• [class^="col-"]: The class have to start with col-.
• [class$="-12"]: The class have to end with -12.

您可以找到属性模式 。

这篇关于类名内的CSS选择器通配符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！