CSS类选择器通配符[复制]

前端之家收集整理的这篇文章主要介绍了CSS类选择器通配符[复制]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Is there a CSS selector by class prefix?4个
所以我想知道是否有办法将通配符扔进我的CSS?

我在按钮元素中有几个类.button-0,.button-1,.button-2,.button-3等.我想要定义所有.button- *类.

是否可以做以下事情:

button .button-[=*] {
  margin-right: 2rem;  
}@H_502_8@

解决方法

使用 attribute selector
button [class*="button-"] {
  margin-right: 2rem;  
}@H_502_8@ 
 

Example Here

MDN

[attr*=value] – Represents an element with an attribute name of attr and whose value contains at least one occurrence of string “value” as substring.

button [class*="button-"] {
  color: red;
}@H_502_8@ 
 
<button>
    <span class="button-0">text</span>
    <span class="button-1">text</span>
    <span class="button-2">text</span>
</button>@H_502_8@ 
 

Chad points out中,一个元素完全有可能包含一个类,例如this-is-my-button-class.在这种情况下,将选择不期望的元素.为了防止这种情况,您可以使用两个选择器的组合:

Example Here

button [class^="button-"],button [class*=" button-"] {
  margin-right: 2rem;  
}@H_502_8@ 
 

选择器按钮[class ^ =“button-”]确保在按钮开始时选择元素.由于元素的第一个类可能不以button-开头,因此选择器[class * =“button-”](注意空白)确保它将被选中.

原文链接:https://www.f2er.com/css/215146.html

猜你在找的CSS相关文章