html - 无法定位 xlink :href using attribute selectors

Question

我正在努力避免必须 <use class="myicon" xlink:href="myicon" />通过简单地定位 xlink:href 的值设置我的 SVG 样式时的属性。以下选择器似乎都不起作用:

[xlink|href*=myicon], // I also set the namespace at the top of the file
[xlink:href*=myicon], 
[xlink\:href*=myicon] {
    color: yellow !important;
}

站点上的其他一些问题似乎暗示在命名空间属性上使用属性选择器的样式应该是可能的，即使纯 html 不支持命名空间属性，因为它应该只将它们视为一个词。但我无法让它发挥作用，所以我对此失去了信心。

Answer 1

正如 Blake Mann 所说，如果您像那样将所有选择器一起列出，它将不起作用，因为 [xlink:href*=myicon] 无效，这会导致您的整个规则集被丢弃。如果您要尝试不同的选择器，则需要一次尝试一个。

[xlink|href*=myicon] 工作正常，但请确保您指定了 XLink 命名空间而不是 SVG 命名空间:

@namespace xlink 'http://www.w3.org/1999/xlink';

html {
    background-color: black;
}

[xlink|href*=myicon] {
    fill: yellow;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <text id="myicon" y="16">Icon</text>
  </defs>
  <use xlink:href="#myicon" />
</svg>