XHTML 命名空间和 CSS 属性选择器

Question

我无法弄清楚如何在不求助于命名空间属性的普通 HTML 名称（包括冒号）的情况下，让 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://whosebug.com/foo">
 <head>
  <title>CSS Attribute Selectors with namespaces</title>
  <style>
   @namespace foo "http://www.whosebug.com/foo";
   span[foo|id=bar] { font-family: monospace; font-weight: bold; }
  </style>
 </head>
 <body>
  <span foo:id="bar">Should be monospace bold</span>
 </body>
</html>

测试用例：

我在 Chrome 和 Firefox 中打开了文件，方法是在我的地址栏中输入相应的 file:/// URL；在这两种情况下，它都没有正确显示。它也没有在 Stack Overflow 上正确显示。

如果我更改代码段以包含 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://whosebug.com/foo">
 <head>
  <title>CSS Attribute Selectors with namespaces</title>
  <style>
   @namespace foo "http://www.whosebug.com/foo";
   span[foo\:id=bar] { font-family: monospace; font-weight: bold; }
  </style>
 </head>
 <body>
  <span foo:id="bar">Should be monospace bold</span>
 </body>
</html>

...它工作正常（使用我的本地浏览器和 Stack Overflow 片段）。

我已经阅读了 Can you style XHTML elements in another namespace using id and class name css selectors? and Do CSS namespace attribute selectors work with XHTML/HTML elements? 中包含的一组陷阱，但我还没有弄明白这一点；我相信我已经完成了这两个问题的答案所暗示的一切。

删除 DOCTYPE 没有成功，尽管我怀疑某种 DOCTYPE 问题，因为 HTML 表单有效而 XHTML 表单无效。

我一定是漏掉了一些简单的东西！

Answer 1

您的文档需要作为 XHTML 文档进行处理，XML 命名空间才能正常工作。请注意，拥有 XHTML DOCTYPE 和相关的 xmlns 属性是不够的。

您可以在服务器端执行此操作，方法是将文档作为内容类型提供：application/xhtml+xml，或者在文件系统上通过将文档保存为 .xhtml 文件扩展名，而不是 .html。对于一个非常快速和肮脏的测试用例，您甚至可以复制整个标记，将其放在地址栏中，在前面添加 data:application/xhtml+xml,，然后导航到生成的数据 URI。

您 link 的第一个问题非常简短地提到了这一点：

If I switched the mime-type to application/xhtml+xml

另请注意，CSS 中的命名空间必须完全与标记中的命名空间相匹配。 @namespace foo "http://www.whosebug.com/foo"; 与 xmlns:foo="http://whosebug.com/foo" 不匹配，因为 www.。（有趣的是，foo 标识符不需要匹配，因为与名称空间本身不同，标识符是分开的。）

XHTML 命名空间和 CSS 属性选择器

XHTML namespaces and CSS attribute selectors

css

xhtml

xml-namespaces

css-selectors