Question

有人知道如何通过CSS xlink:href属性选择XML元素吗？

有关用法，请参阅here，但不解释如何使用CSS选择它。

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

Answer 1

使用CSS attribute selectors，您需要escape the colon :使用前导反斜杠\，如下所示：

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>

<强> WORKING DEMO

Answer 2

使用反斜杠转义冒号的唯一方法是，如果您将文档作为XML接收，但将其输出为HTML，则将其剥离所有XML语义。

如果您使用CSS直接为XML文档设置样式，那么根据declare the xlink namespace at the top of your stylesheet，正确的方法是XLink spec，如下所示：

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

然后use an attribute selector with a namespace prefix定位你的元素：

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

Answer 3

就像普通的HTML一样对待它。点击下面的演示链接。

Demo

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

如何通过xlink选择XML元素：href属性与CSS？

3 个答案:

Demo