css - XHTML namespace 和 CSS 属性选择器

标签 css css-selectors xhtml xml-namespaces

我想不出如何让 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/

相关文章:

javascript - 选中复选框时如何向上移动一个部分?

ruby - 使用 mechanize 获取特定的所有标签? ( ruby )

css - 在 SASS/SCSS 中过度嵌套选择器在实践中有多糟糕?

html - 我如何使用 nth-child() 设置除第五个和第六个以外的所有 <li> 样式

css - 使用960gs的基本问题

jquery - Chrome 问题 - jquery/javascript 在 Ajax 后无法工作

jquery - 如何使用 FixedHeaderTable - 需要基本指导

css - 负相对定位firefox chrome兼容性

javascript - 当外部组件未知时使左右边距相等

jsf - 如何根据从托管 bean 接收到的值获取资源包值?