Bootstrap CSS类通配符

Question

我想要定位Bootstrap容器中的所有列,以便我可以给出类似的样式.例如:

<div class="container unique">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

我可以用CSS来定位它:

.unique .col-md-3{...}

但我想要做的是当我有许多不同的col-*元素时,将它们全部聚集在一起.

我试过这个:

.unique .col-*{...}

但它不起作用.我可以用CSS做到这一点吗？

Answer 1

Pedro,您正在寻找的是属性选择器.在您的特定情况下,您可以像这样使用它:

.unique [class~=col] {color:red }

但你也可以使用更广泛的选项,如

[class*='col-']

覆盖前面的空白区域.

此外,您在这里有相同的西班牙文档

Answer 2

CSS属性包含选择器可用于实现此目的:

.unique [class*=col]{...}

MDN是CSS选择器的有用参考站点.作为参考,可以在此处找到属性选择器.