Bootstrap CSS 类通配符

Bootstrap CSS classes wildcard

提问by Devin

I want to target all of the columns inside a Bootstrap container so I can give then a similar style. For example:

我想以 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>

I can target this with CSS:

我可以用 CSS 来定位这个：

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

but what I want to do is when I have many different col-*elements, to target them all together.

但我想要做的是当我有许多不同的col-*元素时，将它们集中在一起。

I tried this:

我试过这个：

.unique .col-*{...}

but it didn't work. Can I do this with CSS?

但它没有用。我可以用 CSS 做到这一点吗？

回答by Devin

Pedro, what you're looking for is called attribute selector. In your particular case, you can use it like this:

佩德罗，你要找的东西叫做属性选择器。在您的特定情况下，您可以像这样使用它：

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

but you could also use this with more wide options like

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

[class*='col-']

to cover preceding white spaces.

覆盖前面的空格。

Also, here you have the same documentation in Spanish

此外，这里有相同的西班牙语文档

回答by Rich O'Kelly

The CSS attribute contains selector can be used to achieve this:

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

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

MDN is a useful reference site for CSS selectors. For reference, the attribute selectors are found here.

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