SVG 填充排除

Question

我正在使用 userstyles.org，自定义 CSS（我是个 hack）以获得想要的效果。

我想用一种颜色填充所有 SVG，但排除一些 SVG 不受填充的影响。

假设我有一个名为 image 的 data-icon，我该如何排除它或重置它的属性？

我有以下内容：抱歉，此示例中没有 HTML。

 /* set colour vars */
 :root { 
    --bgi: #B4B4B4; /* icon colour */
    --bgf: #B4B4B4; /* icon fix */
 }
 
 /* colour icons */
 span svg path {
    fill: var(--bgi); 
    }
    
/* fix misc icons */
 span[data-icon="link"] svg path 
 {
    fill: var(--bgf) !important; 
}

/* exclude icons */
span[data-icon="image"] svg path 
 {
fill: none !important; 
}

"fill: none" 只是使 SVG 透明。

帮助？

Answer 1

我对你的全部要求有点困惑，但我认为你应该为所有不是[data-icon="image"]的图标着色（填充）

所以..

span:not([data-icon="image"]) svg path {
    fill: var(--bgi); 
    }

...应该可以工作

:not() CSS 伪类表示不匹配选择器列表的元素。由于它阻止特定项目被选中，因此被称为否定伪类。

^MDN