CSS类属性根据不同的父类而变化

Question

我在尝试覆盖类时遇到了一些问题。所有这一切都发生在 Jekyll 内部，我使用 Stylus 来编写 CSS。

我正在使用保存在 html 文件中的内联 SVG，我将其包含在页面正文的开头。 有 6 个路径元素，每个元素有 3 个不同类之一:fill-color1、fill-color2、fill-color3。

<symbol id="my-icon" viewBox="0 0 5461 1024">
  <title>my-icon</title>
  <path class="fill-color1" d="M33.706 ..."></path>
  ...
</symbol>

我在网站的 2 个不同部分使用了这个 SVG，具有不同的背景，所以我决定为填充元素分配不同的颜色会很好。

在 HTML 中我这样调用 SVG:

<svg class="class1 class2 class3">
<use xlink:href="#my-icon"></use></svg>

其中 class1 和 class2 是我也用于其他图像的类(这些不包含填充元素)，而 class3 是我将使用的类(当然有两个不同的名称)来更改填充元素的行为，所以在一种情况下我会:

<svg class="class1 class2 class3a">
<use xlink:href="#my-icon"></use></svg>

在第二种情况下:

<svg class="class1 class2 class3b">
<use xlink:href="#my-icon"></use></svg>

问题是我不明白它在 CSS 中应该是怎样的。我尝试了几种方法，但只能为两个实例分配颜色，而不能为单个实例分配颜色。我想我在改变不同血统元素的行为时遇到了一些问题，但我什至不确定。 CSS 应该如何工作才能正常工作？

Answer 1

如果我理解正确的话，你想要这个:

.class3a
    .fill-color1
        fill red
.class3b
    .fill-color1
        fill blue