使用类前缀创建 CSS 规则 [重复]

Posted

技术标签:

【中文标题】使用类前缀创建 CSS 规则 [重复]【英文标题】:Creating CSS Rules Using Class Prefixes [duplicate] 【发布时间】:2015-02-05 09:45:48 【问题描述】:

Twitter Bootstrap 的不同列选择器具有不同的 CSS 属性。 Col-md-1 的宽度小于 col-md-2。但是,它们都有一些共同的属性。

如何创建一个适用于共享相同前缀的多个类的规则?

我想像这样:

.col*
margin:0,2%;

.col-md-1
width:4.3333333333%;

.col-md-2
width:6.33333333%;

在上面的示例中,.col-md-1 和 .col-md-2 的边距均为 0.2%。这样做的正确方法是什么(如果有的话)?

【问题讨论】:

【参考方案1】:

你可以使用:

[class^=col] margin:0.2%;

div 
  height: 50px;
  margin: 10px;

[class^=col] 
  background: red;
<div class="col-md-1"></div>
<div></div>
<div class="col-md-2"></div>

这个^= 的意思是“开始于”。您也可以使用[class*=col][class*=md] 了解更多信息,请参阅substring matching attribute selectors 上的规范。

(请注意,您应该在边距值声明中使用点而不是逗号或空格)

【讨论】:

我的边距值故意用逗号分隔。 0 上下,2% 左右。不过,感谢您的回答,尤其是规范的链接。为此,我将选择您的答案作为 Michal 的解决方案。 (也适用于 sn-p) @PatrickMotard 那么你应该在边距值之间使用空格,margin:0,2%; 是无效的 CSS 仅供参考、LESS 或 SASS,以便您可以快速完成任务。 @web-tiki,谢谢你接听!你是对的! @PatrickMotard 您在框架的 css 文件之后的另一个 css 文件中使用相同或更高的特异性。你可以把它放在 Bootstrap css 的末尾,但是升级很烦人。【参考方案2】:

您可以使用^= 运算符(以开头)或|= 运算符(在破折号分隔的列表中):

[class^=col] 
    /* this will work just for prefixes */


[class|=col] 
    /* this will work for any dash-separated segment... */


[class|=md] 
    /* ...such as "md" in your case */

不过,请注意 - 这些选择器在性能方面并不是最好的。尽量不要广泛使用它们。

【讨论】:

关于性能的有趣点。如果这种方法的性能受到影响,那么您认为 Twitter 的解决方案是什么? 我不会太担心使用这个 CSS 选择器的性能问题,除非你选择了大量的元素。 没关系:继续往下读。 paulirish.com/2012/box-sizing-border-box-ftw

以上是关于使用类前缀创建 CSS 规则 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

仅当将 2 个类设置为一个元素时才应用 CSS 规则[重复]

仅当元素具有两个类时才应用 CSS 规则[重复]

CSS规则的优先顺序[重复]

多个 CSS 类:基于定义的顺序重叠的属性 [重复]

使用 JavaScript 从 <head><style> 中删除 CSS 类 [重复]

为啥禁用 CSS 规则 [重复]