Question

我读过CSS和SVG并不在一起的地方，但CSS显然适用于SVG。看看这个例子：

<html>
<head>
<style> 
    rect:hover{
      opacity: 0.5;
    }
</style>
</head>
<body>
<svg> 
    <rect width="300" height="100" style="fill:#d64526" />
</svg>

</body>
</html>

这样可行，但如果我将CSS元素更改为：

rect:hover{
 fill: blue;
}

悬停时颜色不会改变。到底是怎么回事？它部分有用吗？

Answer 1

发生了什么事？它部分有用吗？

内联样式（通过style属性添加）更具体，这意味着它覆盖了悬停时添加的颜色。添加到元素中的内联样式将始终覆盖CSS中的任何样式（除非您使用!important，这应该始终避免使用）。

请参阅CSS specificity上的此MDN文章。

如果您使用选择器rect设置初始颜色，它将按预期工作，因为rect:hover的{{3}}高于rect，这意味着它将被覆盖

rect {
  fill: #d64526
}
rect:hover {
  fill: blue;
}

<svg>
  <rect width="300" height="100" />
</svg>

我可以将CSS与SVG一起使用，还是只能部分使用？

1 个答案: