36

About HTML class attribute, that assigns CSS class (or classes?) to a tag. The use of spaces, like in 

<tag class="a b">....</tag>

is valid?

This syntax is used by some web-designers and occurs into exported HTML of Adobe InDesign (tested with versions 5 and 6), and another HTML generation softwares...

It (class="a b") is a valid W3C syntax? What versions of CSS and HTML? (starting from which version became valid?)

EDIT: a natural subquestion "W3C say how to interpret it?" (it is an "override" or another renderization behaviour?) was posted here.

4

4 回答 4

47

这是两个不同的类别a，b并由空格分隔。见w3c 文档

类 = cdata 列表 [CS]

此属性为元素分配一个类名或一组类名。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。

如果你有两个班级

.a { font-weight: bold; }
.b { font-weight: normal; }

并在class="a b"或class="b a"中分配，然后以后的类将覆盖具有相同属性的先前类，因此字体粗细将是正常的。

如果更改 CSS 定义顺序，

.b { font-weight: normal; }
.a { font-weight: bold; }

现在后面的类是粗体的，所以“覆盖具有相同属性的先前类”会导致字体粗细粗体。

于 2012-12-10T20:41:36.243 回答
4

这在 IE 7 及更高版本中受支持，包括所有现代的非 IE 浏览器。正如其他评论者所指出的，它实际上是一个类列表，而不是一个带空格的类。

理解这一点的更好方法是为您的示例提供更多选项：

<tag class="a b">....</tag>
<tag class="a">....</tag>
<tag class="b">....</tag>

.a.b {}在您的 css 中将定位第一个标签。
.a {}将针对第一个和第二个标签。
.b {}将针对第一个和第三个标签。

这就是为什么在单个元素上使用多个类会非常有帮助。

对于 CSS 选择器和伪选择器的问题，我喜欢使用这个（稍微过时的）表http://kimblim.dk/css-tests/selectors/

于 2012-12-10T21:15:34.977 回答
3

单个类名不能有空格。一个元素可以通过列出由空格分隔的类名来定义多个类

于 2012-12-10T20:43:35.650 回答
1

这在 CSS 文件或 HTML 中不起作用。 <div class="a b c"></div>表示 div 元素具有类 a AND 类 b 和类 c。

同时，在样式表方面，.a b c { property: value; }它是无效的，因为它的字面意思是“元素 c 与祖先 b，祖先具有类 a”（并且 b 和 c 显然不是有效的 HTML 元素），而.a .b .c { property: value; }将意味着“元素具有类 c 与祖先具有类 b 的元素和具有类 a 的祖先元素”。如果这对您没有意义，请查找 CSS 特异性规则。

使用破折号或下划线代替空格。

于 2012-12-10T20:45:15.993 回答