SVG的color属性未优先于全局CSS color属性问题求助

CSS #

:root {
  --logo-color: red;
  --text-color: blue;
}

* {
  color: var(--text-color)
}

.logo{
  color: var(--logo-color);
}

HTML #

<svg
 class="logo"
 xmlns="http://www.w3.org/2000/svg"
 width="24"
 height="24"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
>
   <circle cx="12" cy="5" r="3" />
   <line x1="12" y1="22" x2="12" y2="8" />
   <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
</svg>

问题原因 #

全局*选择器会匹配所有元素，包括SVG内部的<circle>、<line>、<path>等子元素。这些子元素的color被直接设置为var(--text-color)（蓝色），而.logo类仅作用在<svg>父元素上。虽然类选择器优先级高于通配符，但子元素的color是被直接赋值的，不会继承父元素的红色，最终stroke="currentColor"读取的是子元素自身的蓝色值。

解决方案 #

方案1：限制全局选择器范围 #

修改通配符选择器，排除SVG内部元素，避免干扰子元素的样式继承：

*:not(svg *) {
  color: var(--text-color);
}

方案2：强制SVG子元素继承父元素颜色 #

直接让SVG内部子元素继承.logo的颜色值，覆盖通配符的设置：

.logo {
  color: var(--logo-color);
}
.logo * {
  color: inherit;
}

方案3：直接指定SVG子元素颜色 #

给.logo下的所有子元素直接设置目标颜色：

.logo, .logo * {
  color: var(--logo-color);
}

内容的提问来源于stack exchange，提问作者davinder singh