Html 如何在css中使用类中的特定单词？

我有一些

'

在我的页面中，就像下面的课程一样

<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>

试试这个：

[class^="icon-"], [class*=" icon-"] {
    margin-right: 10px;
}

---

您可以这样使用

[class*=“icon-”]{
右边距：10px；
}

星号指定继续值必须出现在类值中的某个位置。这样，这就覆盖了图标-

[class^=“icon-”]{
右边距：10px；
}

---

这是一个带有克拉符号的扣带。它在正则表达式中最常用于指定字符串的开头。如果我们想针对所有具有

类（以
图标-
开头）的标记，我们可以使用类似于上面显示的代码段的选择器。
您也可以使用破折号匹配语法：

[class|="icon"]{ margin-right:10px; }

这将正确匹配：

<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>

@Zenith我知道，但是如果他有两个类呢？我没有注意到第二个类之前的空间-干得好：）什么对性能更好-像这样做一个选择器，或者在所有对象中添加一个名为icon的额外类，然后使用
.icon{}
？@Pete
[class^=“icon-”]
更快。我做了一个测试，结果是43毫秒对70毫秒。但是你必须记住：
[class^=*]
是一个CSS 3选择器-IE 8不可能没有黑客攻击。@chiefGui：仅仅因为某些东西是CSS3的一部分，并不自动使它在IE8中不受支持（它声称是CSS2.1兼容的，但这并不意味着它绝对不支持CSS3）。IE8中支持CSS3属性选择器。。。还有IE7。我不知道“col”和这个问题有什么关系-你能详细说明一下吗？这是一个类名，你可以根据你的意思修改它。如果我这样做的话，我会添加另一个类并使用它。示例：
class=“icons icon home”>
然后
.icons{margin right:10px}
<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>

<a class="icon"></a>  /* No hyphen required */

<a class="icons"></a> 
/* Won't match this. "icon" can *only* be followed by a dash */