我想不出如何让 CSS 属性选择器根据命名空间属性设置元素样式,而不求助于命名空间属性的普通 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">
<head>
<title>CSS Attribute Selectors with namespaces</title>
<style>
@namespace foo "http://www.stackoverflow.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>
测试用例:
我通过在地址栏中输入适当的 file:///URL 在 Chrome 和 Firefox 中打开文件;在这两种情况下,它都没有正确显示。它也没有在 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://stackoverflow.com/foo">
<head>
<title>CSS Attribute Selectors with namespaces</title>
<style>
@namespace foo "http://www.stackoverflow.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? 中包含的陷阱集和 Do CSS namespace attribute selectors work with XHTML/HTML elements?但我还没有弄明白这一点;我相信我已经完成了这两个问题的答案所暗示的一切。
删除 DOCTYPE 并没有解决问题,尽管我怀疑是某种 DOCTYPE 问题,因为 HTML 表单有效而 XHTML 表单无效。
我一定是漏掉了一些简单的东西!
最佳答案
您的文档需要作为 XHTML 文档进行处理,XML namespace 才能正常工作。请注意,具有 XHTML DOCTYPE 和 相关的 xmlns
属性不够。
您可以在服务器端通过将文档作为 Content-Type: application/xhtml+xml 来执行此操作,或者在文件系统上通过使用 .xhtml 文件扩展名而不是 .html 保存文档来执行此操作。对于一个非常快速和肮脏的测试用例,你甚至可以复制你的整个标记,把它放在地址栏中,在 data:application/xhtml+xml,
前面加上,并导航到生成的数据 URI。
您链接到的第一个问题非常简短地提到了这一点:
If I switched the mime-type to application/xhtml+xml
另请注意,CSS 中的命名空间必须完全匹配标记中的命名空间。 @namespace foo "http://www.stackoverflow.com/foo";
不匹配 xmlns:foo="http://stackoverflow.com/foo"
因为 www.
. (有趣的是,foo
标识符不需要匹配,因为与命名空间本身不同,标识符是分开的。)
关于css - XHTML namespace 和 CSS 属性选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33782047/