仅使用CSS将多个父类定位到同一孩子

Question

我有三个做同样事情的父类元素。如何将其写成一行。

示例： 我想将以下内容合并为一行：

.parent1 li > div.example> a span {color:red;}
.parent2 li > div.example> a span {color:red;}
.parent3 li > div.example> a span {color:red;}

目标：

.parent1 li, .parent2 li, .parent3 li > div.example > a span {color:red;}

注意：我花了很多时间在Google，Bing和Stack Overflow上寻找解决方案，但由于不确定我要的是什么而找不到。...

Answer 1

在这种情况下无法做到这一点。您只能执行以下操作：

.parent1 li > div.example > a span,
.parent2 li > div.example > a span,
.parent3 li > div.example > a span {
  color:red;
}

并删除不必要的空格字符（请不要这样做，minifier会为您处理）：

.parent1 li > div.example > a span, .parent2 li > div.example > a span, .parent3 li > div.example > a span { color:red; }

此外，请注意，如果可以的话，拥有这样的通用选择器（以及如此复杂的选择器）不被认为是一种好习惯（难以管理特异性，并且您几乎无法控制要样式化的内容），只需添加一个类到您想要使用不同样式的span元素。