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

Question

我的页面中有一些'<a> <i> <label>'像下面这样的类

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

我需要margin-right:10px 在课程开始时创建css"icon-"

如下所示：

<style>
.icon-* {margin-right:10px}
</style>

Answer 1

尝试这个：

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

Answer 2

您还可以使用破折号匹配语法：

[class|="icon"]{ 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 */

这种方法也有一些局限性：

• 不会选择“图标”后是否有空格
• 图标必须在类属性字符串的开头（如 with ^=）

在这里进行测试：http: //jsfiddle.net/mhfaust/Bh95t/

Answer 3

你可以这样使用

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

星号表示进程值必须出现在类值中的某个位置。这样，这涵盖了图标-

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

这是一个带有克拉符号的小包。它最常用于正则表达式中，用于指定字符串的开头。如果我们想定位所有以class开头的 标签icon-，我们可以使用类似于上面显示的片段的选择器。