加入多个 class 包括段落选择器

Question

我想用这个：

 .box-03c1 p {line-height: 12.5px;padding: 15px 12px}
 .box-03c2 p {line-height: 12.5px;padding: 15px 12px} 
 .box-03c3 p {line-height: 12.5px;padding: 15px 12px}
 .box-03c4 p {line-height: 12.5px;padding: 15px 12px}

但我知道有一些方法可以缩短它...

如您所见，参数是重复的。

有线索吗？

非常感谢。

谢谢！

Answer 1

您可以像这样将所有选择器组合在一起：

.box-03c1 p,
.box-03c2 p,
.box-03c3 p,
.box-03c4 p {
    line-height: 12.5px;padding: 15px 12px
}

Answer 2

[class^="box-"] p{
    line-height: 12.5px;
    padding: 15px 12px;
}

这段代码会将属性应用到元素内的每个 p，其中 class 以 'box-' 开头。对于 CSS3

中引入的 select 元素，这是一种非常有效的方法

Answer 3

您可以使用 attribute 类型 selector 来实现：

//never used this, but seems to be a great use-case
[class|=box] p {
  line-height: 12.5px;
  padding: 15px 12px;
}

请注意 这将 select 具有 box 的 class 的 div，而不仅仅是 box-* .

加入多个 class 包括段落选择器

Join more than one class including paragraph selector

css

parameters

class