社区首页 >问答首页 >如何通过使用CSS的xlink:href属性选择XML元素？

问如何通过使用CSS的xlink:href属性选择XML元素？EN

提问于 2014-02-22 06:32:46

回答 3查看 7.1K关注 0票数 6

有人知道如何使用xlink:href属性选择XML元素吗？

有关使用情况，请参见这里，但是它并不解释如何使用CSS来选择它。

<book title="XQuery Kick Start">
  <description
    xlink:type="simple"
    xlink:href="http://book.com/images/XQuery.gif"
    xlink:show="new"> ... </description>
</book>

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-02-22 06:40:40

使用CSS属性选择器，您需要使用一个前导反斜杠\来创建结肠 :，如下所示：

description[xlink\:href="http://book.com/images/HPotter.gif"] {
  background-color: gold;
}

<?xml version="1.0" encoding="UTF-8"?>

<bookstore xmlns:xlink="http://www.w3.org/1999/xlink">
  <book title="Harry Potter">
    <description
      xlink:type="simple"
      xlink:href="http://book.com/images/HPotter.gif"
      xlink:show="new"> ... </description>
  </book>

  <book title="XQuery Kick Start">
    <description
      xlink:type="simple"
      xlink:href="http://book.com/images/XQuery.gif"
      xlink:show="new"> ... </description>
  </book>
</bookstore>

工作演示。

票数 8

EN

Stack Overflow用户

发布于 2014-02-23 12:10:07

用反斜杠转义冒号的唯一方法可能是，如果您以XML的形式接收文档，但将其输出为HTML，则删除它的所有XML语义。

如果您要直接用CSS对XML文档进行样式化，正确的方法是根据名称空间位于样式表顶部。进行XLink规范，如下所示：

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

然后以使用带有命名空间前缀的属性选择器为目标元素：

description[xlink|href="http://book.com/images/XQuery.gif"] {
    /* Styles */
}

票数 4

EN

Stack Overflow用户

发布于 2014-02-22 06:38:25

把它当作一个普通的html。单击下面的演示链接。

演示

XML

<?xml version="1.0" encoding="UTF-8"?>

<homepages xmlns:xlink="http://www.w3.org/1999/xlink">

<homepage xlink:type="simple"
xlink:href="http://www.w3schools.com">Visit W3Schools</homepage>

<homepage xlink:type="simple"
xlink:href="http://www.w3.org">Visit W3C</homepage>

</homepages>

CSS

homepage{
    color:red;
}

票数 -1

EN

原文链接：https://stackoverflow.com/questions/21950703

总结：

css支持

description[xlink\:href="http://book.com/images/HPotter.gif"] {
  background-color: gold;
}

javascript支持

document.querySelector('use[*|href="#iconSuper"]')

‍