html - 类或id的目标css组？

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"]

或者

div[class*="hSpace"]

两者都不相似，但在您的情况下两者都可以工作。

第一个是“以类名开头”，第二个是“包含类名”。

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.

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