无法使用属性选择器定位 xlink:href答案

【问题标题】：Unable to target xlink:href using attribute selectors无法使用属性选择器定位 xlink:href
【发布时间】：2017-02-15 21:59:31
【问题描述】：

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

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

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

【问题讨论】：

标签： html css svg css-selectors xml-namespaces

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;div xlink:href="myicon"&gt;Lorem Ipsum&lt;/div&gt;

【讨论】：

"它不起作用的原因是因为您尝试的前两个选择器无效（| 和 : 字符都需要转义）" |是完全有效的，不需要转义 - 他完全按照预期使用它。虽然 [xlink\:href*=myicon] 有效，但 SVG 纯粹主义者会告诉你它不是正确答案（原因在我的前一句中给出） .
很好地抓住了我的错误；我对 @namespace 的使用缺乏了解...尽管值得注意的是，如果正确的命名空间是 not| 仍会导致整个选择器组无效/i> 包括在内！