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是我用于其他图像的类（这些不包含fill元素），而class3是我将使用的（当然有两个不同的名称）来改变fill元素的行为，所以在一种情况下我会：

<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