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

Posted 2023-03-06

【中文标题】使用类前缀创建 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