使用类前缀创建 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 规则[重复]