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

【问题标题】：How to select XML element by xlink:href attribute with CSS?如何通过 xlink:href 属性与 CSS 选择 XML 元素？
【发布时间】：2014-02-22 06:32:46
【问题描述】：

有谁知道如何通过 xlink:href 属性和 CSS 选择 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>

【问题讨论】：

您可能想告诉我们您如何准确地接收和使用此 XML。尽管可以使用 CSS 来设置 XML 或 HTML 的样式，但它们都非常不同，并且对一个的答案可能并不总是适用于另一个，例如我的答案中所示。

标签： html css xml css-selectors xlink

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

【讨论】：

@user3143218：如果这实际上与问题中所示的 XML 文档一起使用，我会感到惊讶。但是，如果您实际上并未将其作为 XML 处理，那么没有任何抱怨。
好的，我看到原始问题有 [html] 标签，所以据我们所知，OP 可能打算将其样式设置为 HTML。那时您可能不应该删除该标签，尤其是如果您要像 HTML 一样回答的话。
@BoltClock 哦，抱歉，错过了。

【解决方案2】：

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

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

@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 */
}

【讨论】：

不适用于 SVG.use。对于它使用 `svg use[*|href="#mydef-id"] { } `.

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

【讨论】：