带有空格的HTML类属性,它是一个W3C有效类吗?

时间:2012-12-10 20:39:52

标签: html css

关于HTML class 属性,它将CSS类(或类?)分配给标记。 使用空格,如

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

有效吗?

这种语法被一些网页设计师使用,并出现在Adobe InDesign的导出HTML中(使用版本5和6测试),以及另一种HTML生成软件...

它(class="a b")是一种有效的W3C语法?哪些版本的CSS和HTML? (从哪个版本开始有效?)


编辑:一个自然的子问题“W3C说如何解释它?” (它是“覆盖”还是其他再现行为?)was posted here

4 个答案:

答案 0 :(得分:36)

这是两个不同的班级a&amp; b由空格分隔。见w3c DOCS

class = cdata-list [CS]

  

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


如果你有两个班级

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

并在 class =“ab” class =“ba”中分配,之后的类将覆盖具有相同属性的前一个类,因此字体粗细将是正常的

如果更改CSS定义顺序,

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

现在后面的类是粗体,因此“覆盖具有相同属性的先前类”结果字体粗体粗体

答案 1 :(得分:3)

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

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

<tag class="a b">....</tag>
<tag class="a">....</tag>
<tag class="b">....</tag>
你的css中的

.a.b {}将定位第一个标签 .a {}将定位第一个和第二个标记 .b {}将定位第一个和第三个标记。

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

这不适用于CSS文件或HTML。 <div class="a b c"></div>表示div元素具有类AND类b AND类c。

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

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