带有空格的 HTML 类属性，它是 W3C 有效的类吗？答案

【问题标题】：HTML class attribute with spaces, it is a W3C valid class?带有空格的 HTML 类属性，它是 W3C 有效的类吗？
【发布时间】：2012-11-28 07:58:42
【问题描述】：

关于 HTML class 属性，将 CSS 类（或类？）分配给标签。空格的使用，如

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

有效吗？

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

它 (class="a b") 是有效的 W3C 语法？ 什么版本的 CSS 和 HTML？（从哪个版本开始生效？）

编辑：一个自然的子问题“W3C 说如何解释它？” （这是“覆盖”还是其他渲染行为？）was posted here。

【问题讨论】：

不是带空格的类名，是多个类名。您的示例将 a 和 b 两个类应用于元素。
@PeterKrauss “W3C 对 class="a b" 的正确渲染有什么看法：粗体还是正常？” - 你真的去阅读/尝试一些样本怎么样？
回答 cmets：@Shmiddty，谢谢，我更正（编辑）标题；
@dystroy，问题是互补的，因为这里我问的是 W3C 标准，而且，在标题更正之后，这里是关于“有效的属性类值”，而不是关于名称语法；
这是一个真实的问题和主题。它不应该因为“不是一个真正的问题”而被关闭。它可能是重复的，但应该清楚地识别出来。

标签： html css

【解决方案1】：

这是两个不同的类a 和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; }

现在后面的类是粗体的，所以“覆盖具有相同属性的前面的类”结果字体粗体。

【讨论】：

好的，谢谢（！），它是有效的，因为 html401。现在另一个问题，间接发布，但不明确：W3C 说如何解释它？这是“覆盖”还是其他渲染行为？ PS：我将编辑问题以添加此子问题。
你可以像这样在 css 中解释它：
@diEcho bhai ek baar mai samajh aa gaya hai！谢谢巴奇！

【解决方案2】：

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/

【讨论】：

请注意，在我的 css 示例中，.a.b 之间没有空格。
谢谢！我编辑了问题：关于覆盖解释（浏览器渲染），正确的行为是什么。
在这种情况下，您的问题可能会在此处重复：stackoverflow.com/questions/3066356/…
实际上你的第一个 css 类只会影响第一个标签，而不是你所说的所有三个标签。这两个类都应该在标签上，然后这个类才会生效。示例：jsfiddle.net/PP9yf
天啊！你说的对。谢谢@PeterVR！ .a,.b{} 将针对所有 3 个

【解决方案3】：

这在 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 特定性规则。

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

【讨论】：

是的，好的（谢谢！）。我的问题只是关于class="a b c"...@diEcho 准确地展示了允许这种语法的 W3C 第一个标准（HTML4.01）。现在另一个问题是“如何解释这个？”，好吧，你说“a AND b AND c”：浏览器必须如何呈现这个？当 a 和 b 使用相同的属性时是“覆盖”吗？
我知道这是旧的，但在 CSS 中定位所有 3 个类的有效示例是 .a.b.c { property: value; }

【解决方案4】：

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

【讨论】：

@PeterKrauss 带空格的 CSS 类名不是无效的，因为你不会得到任何错误.. 但是在类名中有空格是没有意义的，因为你不会看到你的样式被应用。所以在我的书中你不能有空间。超出这个范围是浪费时间。 CSS（任何版本）根据空格字符对类名进行去标记。有关 CSS 基础知识的更多信息：w3.org/TR/WD-css3-syntax-20030813/#syntax
关于术语，抱歉我的困惑，我将问题标题从“带空格的 CSS 类名...”编辑为“带空格的 HTML 类属性...”。关于 CSS 去标记，谢谢，是对引用的 standard TR/html401, 7.5.2 的加强，这里没有其他人注意到。