如何从 CSS 样式中排除具有填充属性的 SVG答案

【问题标题】：how to exclude SVGs with fill attribute from css styles如何从 CSS 样式中排除具有填充属性的 SVG
【发布时间】：2019-02-22 23:58:42
【问题描述】：

在我的项目开始时，我添加了这个全局 css 规则

svg {
    color: inherit;
    fill: currentColor;
}

设置我所有的 SVG 的填充。现在我添加了一个jQuery rating plugin，它适用于 SVG，并使用 fill 属性为星星着色。但由于上面的代码，星星总是黑色的。我没有删除此规则并将其分别应用于每个 SVG，而是将代码更改为以下

svg:not([fill]) {
    color: inherit;
    fill: currentColor;
}

它工作正常，但我不确定它是否是 not() 选择器的一个很好的用例。是标准的吗？
欢迎任何其他想法。

【问题讨论】：

标签： html css svg

【解决方案1】：

您正在匹配任何没有 fill 属性的 SVG 元素。 not() 伪类表示 do not match a list of selectors 的元素。此规则也会影响其他 SVG 元素。

您也可以为您的 SVG 分配一个类。

svg.mysvg {
  color: inherit;
  fill: currentColor;
}

【讨论】：