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

use*_*218 4 html css xml css-selectors xlink

有谁知道如何通过xlink:hrefCSS属性选择XML元素?

请参阅此处了解用法,但不解释如何使用CSS选择它.

<book title="XQuery Kick Start">
  <description
    xlink:type="simple"
    xlink:href="http://book.com/images/XQuery.gif"
    xlink:show="new"> ... </description>
</book>
Run Code Online (Sandbox Code Playgroud)

Has*_*ami 8

使用CSS属性选择器,您需要通过前导反斜杠转义冒号 ,如下所示::\

description[xlink\:href="http://book.com/images/HPotter.gif"] {
  background-color: gold;
}
Run Code Online (Sandbox Code Playgroud)
<?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>
Run Code Online (Sandbox Code Playgroud)

工作演示.


Bol*_*ock 6

使用反斜杠转义冒号的唯一可行方法是,如果您以 XML 形式接收文档,但以 HTML 形式输出它,从而剥离它的所有 XML 语义。

如果直接使用 CSS 设置 XML 文档的样式,正确的方法是根据XLink 规范在样式表顶部声明命名空间xlink如下所示:

@namespace xlink 'http://www.w3.org/1999/xlink';
Run Code Online (Sandbox Code Playgroud)

然后使用带有命名空间前缀的属性选择器来定位您的元素:

description[xlink|href="http://book.com/images/XQuery.gif"] {
    /* Styles */
}
Run Code Online (Sandbox Code Playgroud)

  • 不适用于 SVG.use。为此,请使用 ` svg use[*|href="#mydef-id"] { } `。 (9认同)