Do CSS namespace attribute selectors work with XHTML/HTML elements?

问题

I want to style elements with xlink:href attribute 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">&lt;p xlink:xref ...</p>
<p xyz:xref="aaa">&lt;p xyz:xref ...</p>
<!-- correctly styled elements: -->
<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>

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:xref and xyz: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-size rule 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.

回答1:

They do. You've just set up either your markup or your CSS rules incorrectly.

Your attribute selectors are looking for elements with href attributes (in the respective namespaces), but your <p> elements have xref attributes, not href attributes, so they don't match.

Your <xyz:p> and <xyz> elements on the other hand all have href attributes, so those are the ones that end up matching your attribute selectors instead.

来源：https://stackoverflow.com/questions/24628932/do-css-namespace-attribute-selectors-work-with-xhtml-html-elements

标签

html

css

xhtml

css-selectors

xml-namespaces