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，你要找的东西叫做attribute selector。在您的特定情况下，您可以像这样使用它：

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

但您也可以将其与更广泛的选项一起使用，例如

[class*='col-']

覆盖前面的空白。

另外，这里有same documentation in Spanish

Answer 2

CSS 属性包含选择器可以用来实现这个：

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

MDN 是一个有用的 CSS 选择器参考网站。作为参考，属性选择器位于here。