如何仅在元素已定义fill时用CSS修改该属性？未定义则不生效

1. 能否仅在CSS可覆盖其他样式时才应用该样式？ #

不行。CSS没有内置“检测自身优先级是否高于现有样式，再决定是否应用”的逻辑。它的优先级规则是固定的：内联样式 > ID选择器 > 类/属性选择器 > 标签选择器，!important会强制提升优先级，但只要你写了这条样式，它就会尝试应用——优先级够就生效，不够就被其他样式覆盖，不存在“无法覆盖就不应用”的机制。

2. 仅在SVG已定义fill属性时修改该属性，纯CSS能否实现？ #

可以，用CSS属性选择器就能做到。属性选择器[fill]会精准匹配所有带有fill属性的SVG元素（不管属性值是什么），然后在这个选择器下设置新的fill值即可。

示例代码 #

HTML结构：

<svg width="20" height="20" viewBox="0 0 20 20">
  <rect width="20" height="20" /> <!-- 无fill属性，不会被修改 -->
</svg>
<svg fill="#fff" width="20" height="20" viewBox="0 0 20 20">
  <rect width="20" height="20" /> <!-- 有fill属性，会被修改 -->
</svg>

对应的CSS：

/* 仅匹配带有fill属性的SVG */
svg[fill] {
  fill: #000 !important; 
  /* 加!important是因为内联fill属性的优先级高于属性选择器，需要强制覆盖；如果是非内联的fill，可去掉!important */
}

这样设置后，只有原本带有fill属性的SVG会被修改填充色，没有fill属性的SVG不会受到影响，正好满足需求。

内容的提问来源于stack exchange，提问作者John Doe