HTML中的class属性可以包含空格吗？这样的class是否符合W3C标准？

Question

关于HTML的class属性，它为标签分配CSS类（或类？）。 使用空格，例如在中。

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

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

它(class="a b")是W3C的有效语法吗？ CSS和HTML的哪些版本呢？（从哪个版本开始变得有效？）

---

编辑：一个自然的子问题“W3C如何解释它？”（它是一个“覆盖”还是另一种渲染行为？）在这里发布了。

- Peter Krauss

---

这不是一个有空格的类名，而是多个类名。你的例子将 a 和 b 两个类都应用到了该元素上。 - Shmiddty

@PeterKrauss "W3C关于class =“a b”正确渲染的说法是粗体还是普通？" - 你为什么不去阅读一些相关资料或者尝试一些样例呢？ - Sajjan Sarkar

回复评论：@Shmiddty，谢谢，我已经更正（编辑）了标题； - Peter Krauss

@dystroy，这些问题是互补的，因为我在这里询问W3C标准，而且，在标题更正之后，这里是关于“有效属性类值”，而不是名称语法的问题； - Peter Krauss

这是一个真正的问题，与主题相关。它不应该被关闭为“不是一个真正的问题”。它可能是一个重复的问题，但这应该被明确标识出来。 - Jukka K. Korpela

Answer 1

这是两个不同的类 a 和 b，用空格分隔。请参阅 w3c DOCS

class = cdata-list [CS]

该属性将类名或一组类名分配给一个元素。任何数量的元素都可以被分配相同的类名或多个类名。多个类名必须用空格字符分隔。

---

如果您有两个类

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

如果在class="a b"或class="b a"中分配，并且后来的class将覆盖具有相同属性的先前class，因此字体重量将变为正常。

如果更改CSS定义顺序，

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

现在后一个类是加粗的，因此"覆盖具有相同属性的先前类"的结果是字重加粗。

- diEcho

---

好的，谢谢！它是有效的，自从html401以来就是这样。现在另一个问题，间接地发布了，但不是明确的：W3C说如何解释它？这是一种“覆盖”还是另一种渲染行为？附注：我将编辑问题以添加这个子问题。 - Peter Krauss

你可以像这样在CSS中解释它： - Jason

@diEcho兄弟，我已经明白了！谢谢你啊！ - taurus05

Answer 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/。

- Jason

---

请注意，在我的 CSS 示例中，.a.b 之间没有空格。 - Jason

谢谢！我编辑了问题：关于覆盖解释（浏览器渲染），正确的行为是什么。 - Peter Krauss

在这种情况下，您的问题可能会在此处重复：https://dev59.com/Y3A75IYBdhLWcg3w3NBe - Jason

实际上，你的第一个CSS类只会影响第一个标签，而不是你所说的所有三个标签。这两个类都应该在此之前的标签上才能生效。例如：http://jsfiddle.net/PP9yf/ - Pevara

糟糕！你是对的。谢谢@PeterVR！.a，.b{}将会选中所有3个。 - Jason

Answer 3

一个类名不能包含空格。一个元素可以有多个类，通过用空格分隔的方式定义多个类名。

- Sajjan Sarkar

---

@PeterKrauss CSS类名中带有空格并不是无效的，因为您不会收到任何错误提示。但是，在类名中使用空格是没有意义的，因为您将看不到应用样式。所以在我的书中，您不能有空格。CSS（任何版本）根据空格字符解除标记化类名。有关CSS基础知识的更多信息，请参见：http://www.w3.org/TR/WD-css3-syntax-20030813/#syntax - Sajjan Sarkar

关于术语，抱歉我的困惑，我将问题标题从“带有空格的CSS类名...”编辑为“带有空格的HTML类属性...”。关于CSS解标记化，谢谢，这是对引用的标准TR/html401, 7.5.2的加强，这里没有其他人注意到。 - Peter Krauss

Answer 4

在CSS文件或HTML中，这是行不通的。<div class="a b c"></div> 意味着该div元素具有类a和类b和类c。

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

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

- Ennui

---

是的，好的（谢谢！）。我的问题只涉及 class="a b c"... @diEcho准确展示了W3C第一个标准（HTML4.01），允许使用这种语法。现在另一个问题是“如何解释这个？”，好吧，你说“a AND b AND c”：浏览器必须如何呈现它？当a和b使用相同属性时是否会被“覆盖”？ - Peter Krauss

我知道这已经过时了，但在CSS中针对所有三个类的有效示例是.a.b.c { property: value; }。 - Sam