Question

我在设置SVG样式时，只是通过简单地定位<use class="myicon" xlink:href="myicon" />属性的值来避免使用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不支持命名空间属性，因为它应该只将它们视为一个单词。但我无法让它发挥作用，所以我对此失去了信心。

Answer 1

你肯定在正确的轨道上做你正在做的事情......事实上，你有正确的答案：

.emacs.d

它无效的原因是因为您尝试的前两个选择器无效（.emacs和[xlink\:href*=myicon] { color: yellow !important; }字符都需要转义），如果CSS选择器包含无效字符，整个选择器组被抛弃。

将此示例视为校对... |（为简单起见，仅使用:，即使这不太正确）也应设置为红色，因为该规则是在蓝色之后一，但因为选择器组被抛出，该规则将不会被应用。但是，没有无效字符的其他选择器将适用！

div

div

Answer 2

正如Blake Mann所说，如果您将所有选择器列在一起，那么它就无法工作，因为[xlink:href*=myicon]无效，这会导致整个规则集被删除。如果你正在尝试不同的选择器，你需要一次尝试一个。

[xlink|href*=myicon]工作得很好，但请确保您已指定XLink命名空间且不 SVG命名空间：

＆＃13;

@namespace xlink 'http://www.w3.org/1999/xlink';

html {
    background-color: black;
}

[xlink|href*=myicon] {
    fill: yellow;
}

＆＃13;

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

＆＃13;

无法使用属性选择器

2 个答案: