XHTML namespaces и селектора атрибутов CSS

Я не могу понять, как получить селектор атрибутов CSS для стилей элементов на основе атрибутов с именами, не прибегая к обычному имени HTML атрибута namespaced (включая двоеточие).XHTML namespaces и селектора атрибутов CSS

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="https://stackoverflow.com/foo"> 
 
\t <head> 
 
\t \t <title>CSS Attribute Selectors with namespaces</title> 
 
\t \t <style> 
 
\t \t \t @namespace foo "http://www.stackoverflow.com/foo"; 
 
\t \t \t span[foo|id=bar] { font-family: monospace; font-weight: bold; } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <span foo:id="bar">Should be monospace bold</span> 
 
\t </body> 
 
</html>

Тестовый пример:

Я открыл файл и в Chrome и Firefox, введя соответствующий файл: /// URL в мой адресной строке; ни в одном случае он не отображается правильно. Он также не отображается правильно для переполнения стека.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="https://stackoverflow.com/foo"> 
 
\t <head> 
 
\t \t <title>CSS Attribute Selectors with namespaces</title> 
 
\t \t <style> 
 
\t \t \t @namespace foo "http://www.stackoverflow.com/foo"; 
 
\t \t \t span[foo\:id=bar] { font-family: monospace; font-weight: bold; } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <span foo:id="bar">Should be monospace bold</span> 
 
\t </body> 
 
</html>

... он работает правильно (как с помощью моего локального браузера и на фрагменте кода переполнения стека).

Я прочитал набор gotchas, включенных в Can you style XHTML elements in another namespace using id and class name css selectors?, и Do CSS namespace attribute selectors work with XHTML/HTML elements?, но я еще не смог понять это; Я считаю, что я сделал все, что предлагают оба вопроса.

Удаление DOCTYPE не делало этого, хотя я подозреваю какую-то проблему DOCTYPE, учитывая, что HTML-форма работает, а форма XHTML - нет.

Возможно, мне не хватает чего-то простого!

источник

2015-11-18 David P. Caldwell

Ваш документ должен быть обработан как документ XHTML для использования пространства имен XML. Обратите внимание, что наличие XHTML DOCTYPE и соответствующих атрибутов xmlns недостаточно.

Вы делаете это на стороне сервера, подавая документ как Content-Type: application/xhtml + xml или в файловую систему, сохраняя документ с расширением .xhtml, а не с .html. Для очень быстрого и грязного тестового примера вы можете даже скопировать всю свою разметку, отбросить ее в адресной строке, добавить data:application/xhtml+xml, и перейти к результирующему URI данных.

Это упоминается в очень короткий мимоходом по первому вопросу Вы связываетесь с:

Если я переключил мим-типа для применения/XHTML + XML

Заметим также, что пространство имен в ваш CSS должен точно соответствует пространству имен в разметке. @namespace foo "http://www.stackoverflow.com/foo"; не соответствует xmlns:foo="http://stackoverflow.com/foo" из-за www.. (Интересно, что идентификаторы foo не обязательно должны совпадать, потому что в отличие от самих пространств имен идентификаторы являются отдельными.)

источник

2015-11-18 14:24:06 BoltClock

отлично, я исправлю опечатку в пространствах имен (очевидно, мое быстрое n-грязное копирование-вставка-изменение из моего реального проекта была введена регрессия), а затем я попробую остальные в своем браузере. –

Переименование файла на .xhtml. Я также попробовал meta http-equiv для установки типа контента (без переименования файла); это сделал * нет * сделайте это. –

@ DavidP.Caldwell. Правильно, тип содержимого в команде '

XHTML namespaces и селектора атрибутов CSS

ответ

Смежные вопросы