Html 无法使用属性选择器以xlink:href为目标

在设置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不支持名称空间属性，因为它应该将它们视为一个单词。但我无法让它发挥作用，所以我对这一点失去了信心。

你所做的肯定是对的。。事实上，你的答案是正确的：

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

---

它无法工作的原因是，您尝试的前两个选择器无效（需要转义

|

和

：

字符），如果CSS选择器包含无效字符，则整个选择器组将被抛出

检查这个例子作为证据。。。

div

（为了简单起见，只使用一个

div

，尽管这不太正确）应该设置为红色，因为该规则在蓝色规则之后，但是由于选择器组被抛出，因此该规则不会被应用。但另一个没有无效字符的选择器将应用

[xlink \：href*=myicon]{
颜色：蓝色；
}
[xlink | href*=myicon]，
[xlink:href*=myicon]，
[xlink \：href*=myicon]{
颜色：红色；
}

---

Lorem Ipsum

正如Blake Mann所说，如果您像那样将所有选择器一起列出，它将不起作用，因为

[xlink:href*=myicon]

无效，这会导致您的整个规则集被删除。如果您正在尝试不同的选择器，则需要一次尝试一个选择器

[xlink | href*=myicon]

工作正常，但请确保指定了xlink名称空间而不是SVG名称空间：

@namespace xlink'http://www.w3.org/1999/xlink';
html{
背景色：黑色；
}
[xlink | href*=myicon]{
填充物：黄色；
}

偶像

“它不起作用的原因是您尝试的前两个选择器无效（“和：字符都需要转义）”。“完全有效，不需要转义-他完全按照预期使用它。虽然[xlink\：href*=myicon]可以工作，但SVG纯粹主义者会告诉您这不是正确的答案（原因在我前面的句子中给出）；我对

@名称空间的使用缺乏知识。。。尽管值得注意的是，如果没有包含正确的名称空间，在选择器中使用
|
仍然会导致整个选择器组无效！