Question

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％。这样做的正确方法（如果有的话）是什么？

Answer 1

您可以使用：

[class^=col] {margin:0.2%;}

＆＃13;

div {
  height: 50px;
  margin: 10px;
}
[class^=col] {
  background: red;
}

＆＃13;

<div class="col-md-1"></div>
<div></div>
<div class="col-md-2"></div>

＆＃13;

此^=表示＆＃34;以＆＃34;开头。您还可以使用[class*=col]或[class*=md]获取更多信息，请参阅substring matching attribute selectors上的规范。

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

Answer 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 */
}

尽管如此，这是一个警告 - 在性能方面，它们并不是最佳选择者。尽量不要广泛使用它们。

使用类前缀创建CSS规则

2 个答案: