Работают ли селекторы атрибутов пространства имен CSS с элементами XHTML/HTML?

Я хочу стилизовать элементы с атрибутом xlink:href в XHTML, однако не могу заставить его работать. Мой тестовый код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xyz="http://xyz.org">
<head>
<meta charset="UTF-8" />
<title>css namespace</title>
<style>
body { font-size: 20px; } /* Oops! A normal rule must not precede @namespace rules! */
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xlink "http://www.w3.org/1999/xlink";
@namespace xyz "http://xyz.org";
html|p {
  color: blue;
}
[xlink|href], [xyz|href] {
  cursor: pointer;
  text-decoration: underline;
  color: red;
}
xyz|p, xyz {
  display: block;
}
</style>
</head>
<body>
<!-- typos: 'xref' should be 'href', thank BoltClock's answer! -->
<p xlink:xref="aaa">&lt;p xlink:xref ...</p>
<p xyz:xref="aaa">&lt;p xyz:xref ...</p>
<!-- correctly styled elements: -->
<p xlink:href="aaa">&lt;p xlink:href ...</p>
<p xyz:href="aaa">&lt;p xyz:href ...</p>
<xyz:p xlink:href="aaa">&lt;xyz:p xlink:href ...</xyz:p>
<xyz:p xyz:href="aaa">&lt;xyz:p xyz:href ...</xyz:p>
<xyz xlink:href="aaa">&lt;xyz xlink:href ...</xyz>
<xyz xyz:href="aaa">&lt;xyz xyz:href ...</xyz>
</body>
</html>

Когда я тестировал его в chrome 34 и firefox 30, я заметил, что правило [xlink|href], [xyz|href] не применяется к элементам <p> XHTML, но применяется к элементам <xyz:p> и <xyz>.

Почему это происходит? Селекторы атрибутов CSS с пространством имен не работают с XHTML?

Обновление:

Да, селекторы атрибутов CSS с пространством имен работают с XHTML, но не с HTML. Мой код на самом деле имеет 2 проблемы:

  1. Есть опечатки для атрибутов xlink:xref и xyz:xref (спасибо за ответ BoltClock). Я обновил код.

  2. #P7# <блочная цитата> #P8#

Обновление 2. Для файлов HTML, которые не поддерживают пространство имен XML, селекторы CSS с пространством имен обычно не работают с ним. Однако, поскольку квалифицированные имена элементов/атрибутов обрабатываются в HTML как простые имена, эти селекторы работают с HTML:

[xlink\:href]:hover, [xyz\:href]:hover { ... }
xyz\:p, xyz { ... }

Интересно, что селекторы пространства имен, ориентированные на пространство имен XHTML, по-прежнему работают с файлами HTML, например:

@namespace html "http://www.w3.org/1999/xhtml";
html|p { ... }

Другим исключением является иностранный контент, такой как SVG, предложенный @Alohci.


html css xml-namespaces css-selectors xhtml
person Duan Yao    schedule 08.07.2014    source источник
comment
Вы подаете документ как Content-Type: application/xhtml+xml?   -  person Quentin    schedule 08.07.2014
comment
Я использую расширение .xhtml и тестирую его локально, это должно обеспечить тип mime application/xhtml+xml.   -  person Duan Yao    schedule 08.07.2014
comment
Если вы хотите использовать пространство имен XML, вы должны использовать XML-документ. Ваша текущая версия выглядит как обычный HTML. Установите заголовок XML и используйте правильный тип содержимого для доставки этого файла.   -  person feeela    schedule 08.07.2014
comment
Я думаю, что заголовок вопроса задом наперед. Элементы XML/HTML вообще не поддерживают CSS и пространства имен CSS.   -  person feeela    schedule 08.07.2014
comment
@feeela объявление XML является необязательным, и я сделал используйте тип контента application/xhtml+xml. Теперь он работает так, как ожидалось. Да, заголовок надо перевернуть.   -  person Duan Yao    schedule 08.07.2014
comment
Это немного сложнее, чем просто селекторы атрибутов CSS с пространством имен, которые не работают в HTML. В основном нет. В некоторых особых случаях они это делают. xlink:href, когда он появляется в иностранном контенте, таком как SVG, является одним из таких особых случаев. Например, см. jsfiddle.net/Kqr3M.   -  person Alohci    schedule 08.07.2014
comment
@Alohci Спасибо! Думаю, ваш комментарий заслуживает отдельного ответа.   -  person Duan Yao    schedule 09.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Они делают. Вы только что неправильно настроили разметку или правила CSS.

Ваши селекторы атрибутов ищут элементы с атрибутами href (в соответствующих пространствах имен), но ваши элементы <p> имеют атрибуты xref, а не атрибуты href, поэтому они не совпадают.

С другой стороны, все ваши элементы <xyz:p> и <xyz> имеют атрибуты href, так что это те, которые вместо этого соответствуют вашим селекторам атрибутов.

person BoltClock    schedule 08.07.2014
comment
Большое тебе спасибо! xref — это опечатки в приведенном выше тестовом коде, и у моего производственного кода есть еще одна проблема: правила стиля перед правилами @namespace. Я обновил свой вопрос, чтобы отразить это. - person Duan Yao; 08.07.2014