CSS命名空间属性选择器是否与XHTML / HTML元素一起使用？ [英] Do CSS namespace attribute selectors work with XHTML/HTML elements?
问题描述
我想在XHTML中使用 xlink：href 属性来创建元素，但是我无法使它工作。我的测试代码：
<！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; } / *糟糕！正常规则不得先于@namespace规则！ * /
@namespace htmlhttp://www.w3.org/1999/xhtml;
@namespace xlinkhttp://www.w3.org/1999/xlink;
@namespace xyzhttp://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'应该是'href'，谢谢BoltClock的答案！ - >
< p xlink：xref =aaa>& lt; p xlink：xref ...< / p>
< p xyz：xref =aaa>& lt; p xyz：xref ...< / p>
<！ - 正确的样式元素： - >
< p xlink：href =aaa>& lt; p xlink：href ...< / p>
< p xyz：href =aaa>& lt; p xyz：href ...< / p>
< xyz：p xlink：href =aaa>& lt; xyz：p xlink：href ...< / xyz：p>
< xyz：p xyz：href =aaa>& lt; xyz：p xyz：href ...< / xyz：p>
< xyz xlink：href =aaa>& lt; xyz xlink：href ...< / xyz>
< xyz xyz：href =aaa>& lt; xyz xyz：href ...< / xyz>
< / body>
< / html>
当我在chrome 34和firefox 30中测试时，我注意到 {xlink | href]，[xyz | href] 规则不适用于XHTML的< p> 元素， c $ c>< xyz：p> 和< xyz> 元素。
为什么会发生？不要命名空间CSS属性选择器与XHTML一起使用？
更新：
是的，命名空间CSS属性选择器使用XHTML，而不是HTML。我的代码实际上有2个问题：
-
有属性
xlink：xref和xyz：xref（谢谢BoltClock的回答）。我更新了代码。 -
正常的CSS规则不能位于任何@namespace规则之前，否则@namespace规则无效c $ c> font-size 开头的规则）。请参见 CSS命名空间模块3级：
任何@namespace规则必须遵循所有@charset和@import规则，并在样式表中的所有其他未忽略的规则和样式规则之前。
更新2：
对于不支持的HTML文件XML命名空间，命名空间CSS选择器通常不使用它。但是，由于合格的元素/属性名称在HTML中被视为简单的名称，这些选择器使用HTML：
[xlink ：href]：hover，[xyz \：href]：hover {...}
xyz \：p，xyz {...}
@namespace htmlhttp://www.w3.org/1999/xhtml;
html | p {...}
另一个例外是外部内容，如SVG，建议by @Alohci。
解决方案
您的属性选择器正在使用
href 属性（在各个命名空间中），但您的< p>元素具有xref属性，
< xyz：p> / code>和< xyz>元素都具有href属性，因此最终匹配您的属性选择器的那些。I want to style elements with
xlink:hrefattribute in a XHTML, however I can't make it work. My test code:<!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>When I test it in chrome 34 and firefox 30, I note that the
[xlink|href], [xyz|href]rule isn't applied to XHTML's<p>elements, but is applied to<xyz:p>and<xyz>elements.Why this happen? Don't namespaced CSS attribute selectors work with XHTML?
Update:
Yes, namespaced CSS attribute selectors work with XHTML, but not HTML. My code actually has 2 problems:
There are typos for attributes
xlink:xrefandxyz:xref(thank BoltClock's answer). I updated the code.A normal CSS rule must not precede any @namespace rules, or the @namespace rules are invalid (my original post missed the
font-sizerule at the beginning). See CSS Namespaces Module Level 3:Any @namespace rules must follow all @charset and @import rules and precede all other non-ignored at-rules and style rules in a style sheet.
Update 2: For HTML files, which doesn't support XML namespace, namespaced CSS selectors generally don't work with it. However, because qualified element/attribute names are treated as simple names in HTML, these selectors work with HTML:
[xlink\:href]:hover, [xyz\:href]:hover { ... } xyz\:p, xyz { ... }Interestingly, namespaced selectors that targeting XHTML namespace still work with HTML files, like this:
@namespace html "http://www.w3.org/1999/xhtml"; html|p { ... }Another exception is foreign content such as SVG, suggested by @Alohci.
解决方案They do. You've just set up either your markup or your CSS rules incorrectly.
Your attribute selectors are looking for elements with
hrefattributes (in the respective namespaces), but your<p>elements havexrefattributes, nothrefattributes, so they don't match.Your
<xyz:p>and<xyz>elements on the other hand all havehrefattributes, so those are the ones that end up matching your attribute selectors instead.这篇关于CSS命名空间属性选择器是否与XHTML / HTML元素一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
