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

【问题标题】：How use particular word from class in css?如何在css中使用类中的特定单词？
【发布时间】：2013-07-18 19:16:58
【问题描述】：

我的页面中有一些'<a> <i> <label>'，如下所示

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

当课程以"icon-" 开头时，我需要使用margin-right:10px 创建css

如下所示：

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

【问题讨论】：

如果我这样做，我会添加另一个类并使用它。示例：class="icons icon-home"> 然后.icons {margin-right:10px}

【解决方案1】：

试试这个：

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

【讨论】：

@Zenith 我知道，但是如果他有两个课程呢？
我没有注意到第二个之前的空间 - 干得好 :)
什么对性能更好 - 做这样的选择器或为所有对象添加一个名为 icon 的额外类，然后使用.icon {}？
@Pete [class^="icon-"] 更快。我做了一个测试，结果是 43ms 对 70ms。但你必须记住：[class^=*] 是一个 CSS 3 选择器——没有 hack 的 IE 8 就没有机会。
@chiefGui：仅仅因为某些东西是 CSS3 的一部分并不会自动使其在 IE8 中不受支持（它声称符合 CSS2.1，确实如此，但这并不意味着它绝对不支持 CSS3 )。 IE8 支持 CSS3 属性选择器... 和 IE7.

【解决方案2】：

你可以这样使用

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

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

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

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

【讨论】：

【解决方案3】：

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

[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 */

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

【讨论】：