Can you style XHTML elements in another namespace using id and class name css selectors?

前端未结

关注

 3  1876

I\'m developing an application that uses ubiquity-xforms. Previously I had been serving the pages up as text/html with the XHTML 1.0 doctype.

If I switched the mime-

相关标签:

3条回答

北海茫月

2020-12-18 06:59

You have no doctype, character encoding, etc. Here you go:

Change to this exactly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--Always include character encoding and content-type-->
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>

0 讨论(0)

予麋鹿

2020-12-18 07:06
Frankie,

porneL's answer is right -- in XHTML mode you have to use different CSS rules, because there is nothing 'special' about @id an @class.

Even armed with this knowledge, your problems aren't over though. :)

The temptation might be to just put HTML and XHTML CSS selectors together, and apply them to the same rule:
```
@namespace xf url(http://www.w3.org/2002/xforms);

xf\:input.surname, xf|input[class~="surname"] {
  color: green;
}
```
However, a further problem is that IE will ignore the entire rule, because it doesn't like the XHTML syntax. So littered through Ubiquity XForms you'll see things like this:
```
@namespace xf url(http://www.w3.org/2002/xforms);

xforms\:hint.active, xf\:hint.active {
  display: inline;
}

xf|hint[class~="active"] {
  display: inline;
}
```
As you can see we've had to repeat the styling with different selectors. (This is something we're hoping to address with a function that will abstract out the style-setting task. Then you'll only have to write one rule.)

Note a couple of extra things:
- that the HTML rules are using ':' as a literal character (hence the '\' to escape), and know nothing of namespaces;
- the XHTML CSS rules use the '~=' operator, which means that the attribute must contain the value specified, rather than be exactly equal to it.
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光取名叫无心

2020-12-18 07:07
You don't have to use #id/.class selectors. Instead you can use:
```
[id=test] {}
[class|=testing] {}
```
which are equivalent.

AFAIK class is HTML-specific thing, and because XML namespaces are completely insane, XHTML attributes aren't in the XHTML namespace! You're probably out of luck with this one.

For ID you might try xml:id, but I haven't checked if anything actually supports it.

In case you wanted to match namespaced elements, that's possible with CSS Namespaces:
```
@namespace xf "http://www.w3.org/2002/xforms";
xf|group {}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...