Dua*_*Yao 7 html css xhtml xml-namespaces css-selectors
我想xlink:href在 XHTML 中使用属性设置元素的样式，但是我无法使其工作。我的测试代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xyz="http://xyz.org">
<head>
<meta charset="UTF-8" />
<title>css namespace</title>
<style>
body { font-size: 20px; } /* Oops! A normal rule must not precede @namespace rules! */
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xlink "http://www.w3.org/1999/xlink";
@namespace xyz "http://xyz.org";
html|p {
color: blue;
}
[xlink|href], [xyz|href] {
cursor: pointer;
text-decoration: underline;
color: red;
}
xyz|p, xyz {
display: block;
}
</style>
</head>
<body>
<!-- typos: 'xref' should be 'href', thank BoltClock's answer! -->
<p xlink:xref="aaa"><p xlink:xref ...</p>
<p xyz:xref="aaa"><p xyz:xref ...</p>
<!-- correctly styled elements: -->
<p xlink:href="aaa"><p xlink:href ...</p>
<p xyz:href="aaa"><p xyz:href ...</p>
<xyz:p xlink:href="aaa"><xyz:p xlink:href ...</xyz:p>
<xyz:p xyz:href="aaa"><xyz:p xyz:href ...</xyz:p>
<xyz xlink:href="aaa"><xyz xlink:href ...</xyz>
<xyz xyz:href="aaa"><xyz xyz:href ...</xyz>
</body>
</html>
当我在 chrome 34 和 firefox 30 中测试它时，我注意到该[xlink|href], [xyz|href]规则不适用于 XHTML 的<p>元素，而是应用于<xyz:p>和<xyz>元素。
为什么会发生这种情况？命名空间 CSS 属性选择器不能与 XHTML 一起使用吗？
更新：
是的，命名空间 CSS 属性选择器适用于 XHTML，但不适用于 HTML。我的代码实际上有两个问题：
xlink:xref属性和存在拼写错误xyz:xref（感谢 BoltClock 的回答）。我更新了代码。
普通的 CSS 规则不能先于任何 @namespace 规则，否则 @namespace 规则无效（我原来的帖子一font-size开始就错过了该规则）。请参阅CSS 命名空间模块级别 3：
任何 @namespace 规则都必须遵循所有 @charset 和 @import 规则，并位于样式表中所有其他非忽略的 at 规则和样式规则之前。
更新 2： 对于不支持 XML 命名空间的 HTML 文件，命名空间 CSS 选择器通常无法使用它。但是，由于限定元素/属性名称在 HTML 中被视为简单名称，因此这些选择器可与 HTML 配合使用：
[xlink\:href]:hover, [xyz\:href]:hover { ... }
xyz\:p, xyz { ... }
有趣的是，针对 XHTML 命名空间的命名空间选择器仍然适用于 HTML 文件，如下所示：
@namespace html "http://www.w3.org/1999/xhtml";
html|p { ... }
另一个例外是@Alohci 建议的外国内容，例如 SVG。
他们是这样。您刚刚错误地设置了标记或 CSS 规则。
您的属性选择器正在寻找具有href属性的元素（在各自的命名空间中），但是您的<p>元素具有xref属性，而不是href属性，因此它们不匹配。
另一方面，您的<xyz:p>和元素都具有属性，因此这些元素最终会与您的属性选择器匹配。<xyz>href