Работят ли селекторите на атрибути на 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="/bgaaa">&lt;p xlink:href ...</p>
<p xyz:href="/bgaaa">&lt;p xyz:href ...</p>
<xyz:p xlink:href="/bgaaa">&lt;xyz:p xlink:href ...</xyz:p>
<xyz:p xyz:href="/bgaaa">&lt;xyz:p xyz:href ...</xyz:p>
<xyz xlink:href="/bgaaa">&lt;xyz xlink:href ...</xyz>
<xyz xyz:href="/bgaaa">&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
Благодаря ти много! xrefs са правописни грешки в тестовия код по-горе и моят производствен код има друг проблем: правила за стил преди правила за @namespace. Актуализирах въпроса си, за да отразя това. - person Duan Yao; 08.07.2014