将CSS应用于包含col-子字符串的一组CSS类

Question

将CSS应用于包含col-子字符串的一组CSS类

csscss-selectors

46

我不确定用什么措辞最好，这可能就是为什么尽管它很简单，但我仍然很难研究出来的原因。

我的目标是对一组类应用CSS。

例如，我有 .col-1, .col-2, .col-3, .col-4 这些类。

我想做的是制作一些CSS代码，可以针对所有带有文本 col- 的类进行样式更改，这样我就不必将其应用于每个单独的数字。

我肯定以前见过这种情况，但现在想不起来该怎么做了。

- Suzi Larsen

2个回答

1

你可以使用CSS [attribute*=value]选择器。

<style>
div[class*=col-]{
color: green;
}
</style>

<body>
<div class="col-4">
<p>this is an example one</p>
<div>
<div class="test">
<p>this is an example one</p>
<div>
<div class="col-8">
<p>this is an example three</p>
<div>
</body>

请查看以下链接。

https://www.w3schools.com/cssref/sel_attr_contain.asp

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain

- Arshad Syed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashem Qolami · Accepted Answer

您可以使用 [class*="col-"] CSS属性选择器来选择包含至少一个 col- 的元素作为其 class 值的任何元素。

[class*="col-"] {
    border-color: red;
}

如果所有的class属性值都以col-开头，你可以使用[class^="col-"]选择器。

但是，为了防止被选择类似于foo-col-1这样的类，你可以使用上述两个选择器的组合，如下所示（感谢@JosephSpens）：

[class^="col-"], [class*=" col-"] {
  border-color: red;
}

演示链接.