XHTML 命名空间和 CSS 属性选择器
[英]XHTML namespaces and CSS attribute selectors
问题描述
I can't figure out how to get CSS attribute selectors to style elements based on namespaced attributes without resorting to the ordinary HTML name of the namespaced attribute (including the colon).
我无法弄清楚如何让 CSS 属性选择器根据命名空间属性来设置样式元素，而不求助于命名空间属性的普通 HTML 名称（包括冒号）。
Example:例子：
<!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>
Test case:测试用例：
I opened the file in both Chrome and Firefox by typing the appropriate file:/// URL into my address bar;我通过在地址栏中键入适当的 file:/// URL 在 Chrome 和 Firefox 中打开了该文件； in neither case does it show up correctly.在这两种情况下，它都不能正确显示。 It also does not show up correctly on Stack Overflow.它也不会在 Stack Overflow 上正确显示。
If I change the snippet to include the HTML attribute name:如果我更改代码段以包含 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>
... it works correctly (both using my local browser and on the Stack Overflow snippet). ...它工作正常（使用我的本地浏览器和 Stack Overflow 代码段）。
I've read the set of gotchas included in Can you style XHTML elements in another namespace using id and class name css selectors?我已经阅读了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?和CSS 命名空间属性选择器是否适用于 XHTML/HTML 元素？ but I have not yet been able to figure this out;但我还没有弄清楚这一点； I believe I've done everything both questions' answers suggest.我相信我已经完成了两个问题的答案所暗示的一切。
Removing the DOCTYPE didn't do it, although I suspect some kind of DOCTYPE problem given that the HTML form works and the XHTML form does not.删除 DOCTYPE 并没有做到这一点，尽管我怀疑存在某种 DOCTYPE 问题，因为 HTML 表单有效而 XHTML 表单无效。
I must be missing something simple!我一定错过了一些简单的东西！
1 个解决方案
解决方案1
3 已采纳 2015-11-18 14:24:06
Your document needs to be processed as an XHTML document for the XML namespaces to work.您的文档需要作为 XHTML 文档进行处理，XML 名称空间才能工作。 Note that having an XHTML DOCTYPE and the relevant xmlns attributes is not enough.请注意，仅有 XHTML DOCTYPE和相关的xmlns属性是不够的。
You do this on the server side by serving the document as Content-Type: application/xhtml+xml, or on the file system by saving the document with a .xhtml file extension instead of .html.您可以通过将文档作为 Content-Type: application/xhtml+xml 在服务器端执行此操作，或者在文件系统上通过使用 .xhtml 文件扩展名而不是 .html 保存文档来执行此操作。 For a very quick and dirty test case you can even copy your entire markup, drop it in the address bar, prepend data:application/xhtml+xml, , and navigate to the resulting data URI.对于非常快速和肮脏的测试用例，您甚至可以复制整个标记，将其放在地址栏中，在data:application/xhtml+xml,前面加上 ，然后导航到结果数据 URI。
This is mentioned in very brief passing by the first question you link to:您链接到的第一个问题非常简短地提到了这一点：
If I switched the mime-type to application/xhtml+xml
Note also that the namespace in your CSS must exactly match the namespace in the markup.另请注意，CSS 中的命名空间必须与标记中的命名空间完全匹配。 @namespace foo "http://www.stackoverflow.com/foo"; does not match xmlns:foo="http://stackoverflow.com/foo" because of the www.由于www.不匹配xmlns:foo="http://stackoverflow.com/foo" www. . . (Interestingly, the foo identifiers do not need to match, because unlike the namespaces themselves the identifiers are separate.) （有趣的是， foo标识符不需要匹配，因为与命名空间本身不同，标识符是分开的。）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.