缩短复杂的css选择器

Question

我正在尝试缩短一些css选择器以便于阅读 例如：

.a>.c,.b>.c

我认为我在过去使用括号进行分组，然后继续使用更多选择器

(.a,.b)>.c

但似乎这不是有效的CSS。

我是否曾梦想过我之前做过这件事还是有一个简单的方法吗？

我主要关心的是css的可读性而不是字节数，但这是缩短选择器的另一个明显优势。

Answer 1

在CSS中不使用括号括号。请参阅Selectors Level 3 W3C Recommendation。

如果.c只是.a和.b的孩子，您只需使用：

.c { }

如果.a和.b与.x不同（假设.x有一个.c孩子），您可以给他们一个特定的班级或{{3 }}：

<div class="a t" <!-- or --> data-t><span class="c"></span></div>
<div class="b t" <!-- or --> data-t><span class="c"></span></div>
<div class="x"><span class="c"></span></div>

使用样式：

.t > .c { }
/* Or */
[data-t] > .c { }

否则，对于您已有的内容，没有什么不可读。如果你想让它更容易阅读，只需将它稍微分开并将每个选择器放在一个新的行上：

.a > .c,
.b > .c {
    ...
}