css - 缩短复杂的 CSS 选择器

Question

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

.a>.c,.b>.c

我以为我过去曾使用括号对联合进行分组，然后再继续使用更多选择器

(.a,.b)>.c

但这似乎不是有效的CSS。

我是否梦想我以前做过这个或者有一个简单的方法？

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

Answer 1

括号在 CSS 中不是这样使用的。请参阅选择器 3 级 W3C 建议。

如果.c只是曾经的孩子，.a您.b可以简单地使用：

.c { }

如果.a和.b不同.x（假设.x有一个.c孩子），你可以给他们一个特定的类或data-* 属性：

<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 {
    ...
}