Как выбрать элемент XML по атрибуту xlink:href с помощью CSS?

Question

Кто-нибудь знает, как выбрать элемент XML с помощью xlink:href приписать с CSS?

Смотрите здесь для использования, однако это не объясняет, как выбрать его с помощью 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, вам нужно экранировать двоеточие : ведущий обратный слеш\, следующее:

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>

РАБОЧАЯ ДЕМО.

Answer 2

Единственный способ избежать двоеточия с обратной косой чертой может сработать, если вы получаете документ в формате XML, но выводите его в виде HTML, удаляя из него всю семантику XML.

Если вы разрабатываете XML-документ напрямую с помощью CSS, правильный способ - объявить xlink пространство имен в верхней части таблицы стилей в соответствии со спецификацией XLink, например:

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

Затем используйте селектор атрибута с префиксом пространства имен, чтобы нацелить ваш элемент:

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

Answer 3

Относитесь к этому так же, как к обычному 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;
}