Question

我有一组班级名称：

.hSpace5{padding-top:0.3125em;}
.hSpace10{padding-top:0.625em;}
.hSpace15{padding-top:0.9375em;}
.hSpace20{padding-top:1.25em;}
.hSpace25{padding-top:1.5625em;}
.hSpace30{padding-top:1.875em;}
.hSpace35{padding-top:2.1875em;}
.hSpace40{padding-top:2.5em;}

是否可以通过引用前几个字符来定位所有这些类名.hSapce - ？

Answer 1

你可以在css3

中这样做

div[class^="hSpace"]

OR

div[class*="hSpace"]

两者都不相似，但在你的场景中两者都有效。

首先是＆＃34;以类名开头＃34;第二个是＆＃34;包含类名＆＃34;。

Answer 2

您可以使用以下选择器选择其class属性包含值 hspace 的所有元素。请注意，这是一个包含选择器，因此字符串可以出现在类名中的任何位置。

div[class*='hspace'] {
   /* styles */ 
}

div[class*='hspace'] {
  color: red;
}

<div class='hspace1'>aa</div>
<div class='hspace2'>bb</div>
<div class='hspace-b'>ab</div>
<div class='c-hspace'>cd</div>
<div class='hvspace'>cd</div>
<!-- will not be selected -->

但请查看浏览器支持。

如Rab Nawaz的回答所述，您也可以使用以下内容。

div[class^='hspace'] { }

事实上，此方法可能更适合您的情况，因为它会选择div以class开头的所有hspace。

更多信息可以在第2节中的表格W3C Selectors Level 3 Spec中找到。

目标css组的类或id？

2 个答案: