无法使用属性选择器靶向Xlink:HREF

Question

我试图避免使用xlink:href属性的值时，在造型我的SVG时，必须避免使用<use class="myicon" xlink:href="myicon" />。以下选择器似乎没有用：

[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：

@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>

Answer 2

您肯定在正确的轨道上，您的工作。实际上，您有正确的答案：

[xlink:href*=myicon] {
    color: yellow !important;
}

它不起作用的原因是因为您尝试过的前两个选择器无效（|和:字符都需要逃脱），如果CSS选择器包含无效的字符，则整个选择器 group 被扔掉。

将此示例检查为证明... div（即使使用div为简单起见，即使不太正确）应该设置为红色，因为该规则是在蓝色的，而是因为选择器组获取抛出，该规则不会应用。没有无效字符的其他选择器将应用！

[xlink:href*=myicon] {
    color: blue;
}
[xlink|href*=myicon],
[xlink:href*=myicon], 
[xlink:href*=myicon] {
    color: red;
}

<div xlink:href="myicon">Lorem Ipsum</div>