css - CSS类继承

Question

我有这样的 CSS 规则：

.c1 .c2 .c3 {
   //some css rules
}

我可以一步应用这些规则吗：

<div class="c1 c2 c3">
   //some web content
</div>

或者我必须制作如下结构：

<div class="c1">
  <div class="c2">
    <div class="c3">
      //some web content
    </div>
  </div>
</div>

或者也许有更简单的方法来做到这一点？我想将此规则应用于单个 div，并且不允许更改 css 定义文件。

Answer 1

.c1 .c2 .c3火柴

<div class="c1">
  <div class="c2">
    <div class="c3">
      //some web content
    </div>
  </div>
</div>

虽然.c1.c2.c3（注意空间差异）匹配

<div class="c1 c2 c3">
   //some web content
</div>

.c1 .c2（带空格）是后代选择器：http ://www.w3.org/TR/CSS2/selector.html#descendant-selectors

而，.c1.c2（不带空格）将通过链接两个类选择器来匹配同时包含c1和类的元素。c2

您可能还想看看这个：http ://css-tricks.com/multiple-class-id-selectors/ 和这个 SO 问题：Select element based on multiple classes

因此，在您的情况下，您可能需要制作嵌套结构。

Answer 2

如果要将相同的 css 应用于 3 个类，则必须在选择器之间使用逗号，如下所示：

.c1, .c2, .c3 {

}

.c1 .c2 .c3 表示父子关系。

这是完全有效的：

<div class="c1 c2 c3">
   //some web content
</div>

结果是，来自 c1 和 c2 和 c3 的所有 css 都将应用于 div。

取决于你想做什么。如果您只是想将 3 个类的 css 分配给 1 个元素，请使用上述方法。避免仅仅为了造型而制作无用的包装器。