当前元素和子元素都更简洁 CSS 到 select

Question

概览

作为通用 CSS 框架的一部分，我构建了各种控件。我希望使用通用且灵活的类以品牌颜色设计它们的样式，同时使我的 CSS 尽可能小。

由于我需要设置样式的元素和控件的数量，CSS 文件中塞满了以品牌为中心的样式。为了实现我想要的灵活结构，看起来我必须将

中的每个品牌规则加倍（或加倍）

.brand.brand-red  .control.brand-control { color: red; }

进入

.brand.brand-red  .control.brand-control,     /* Required */
.brand .brand-red .control.brand-control,     /* Required */
.brand  .brand-red.control.brand-control {    /* Useful */
    color: red;
}

这不太理想，因为它会使我的 CSS 文件的整体大小增加将近三倍，我迫切希望它尽可能小。 有什么办法可以把CSS的第二块写得小一些吗？

理想情况下我可以这样做：

.brand & .brand-red.control & .brand-control { ... }
    /* or */
.brand / .brand-red.control / .brand-control { ... }

但我很确定这种事情还不存在，如果有的话。

总结

我希望我的泛型 CSS 尽可能小，但仍适用于以下所有结构：

/* COLOURS // BRAND COLOURS */
.brand.brand-red  .control.brand-control,     /* Required */
.brand .brand-red .control.brand-control,     /* Required */
.brand  .brand-red.control.brand-control {    /* Useful */
    color: red;
}

.brand.brand-red.control.brand-control {      /* Not Required */
    color: red;
}

<div class="brand brand-red">
    <div class="control brand-control">Test 1 // Required</div>
</div>

<div class="brand">
    <div class="brand-red">
        <div class="control brand-control">Test 2 // Required</div>
    </div>
</div>

<div class="brand">
    <div class="brand-red control brand-control">Test 3 // Useful</div>
</div>

<div class="brand brand-red control brand-control">Test 4 // Not Required</div>

参考：

W3Schools // CSS Selectors Reference

Answer 1

无论如何你都在使用.brand-red

.brand-red {
    color: red;
}

<div class="brand brand-red">
    <div class="control brand-control">Test 1 // Required</div>
</div>

<div class="brand">
    <div class="brand-red">
        <div class="control brand-control">Test 2 // Required</div>
    </div>
</div>

<div class="brand">
    <div class="brand-red control brand-control">Test 3 // Useful</div>
</div>

<div class="brand brand-red control brand-control">Test 4 // Not Required</div>

Answer 2

目前使用 css 选择器无法实现您想要实现的目标。

您可以定位：

.parent-class.another-parent-class
.parent-class > .direct-child-class
.parent-class .descendant-class
当然还有很多其他的 cool options...

但不幸的是，您没有选择父元素的选项，另一个 class 可以应用于它，或者它的任何后代。

抱歉 :-)

当前元素和子元素都更简洁 CSS 到 select

More concise CSS to select both current and child elements

html

css

css-selectors

bundling-and-minification