带空格的 HTML 类属性，它是 W3C 有效类吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13808846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML class attribute with spaces, it is a W3C valid class?
提问by Peter Krauss
About HTML classattribute, that assigns CSS class (or classes?) to a tag. The use of spaces, like in
关于 HTML类属性，它将 CSS 类（或类？）分配给标签。空间的使用，比如
<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...
这种语法被一些网页设计师使用，出现在 Adobe InDesign 的导出 HTML 中（用版本 5 和 6 测试），以及另一种 HTML 生成软件......
It (class="a b") is a valid W3C syntax?What versions of CSS and HTML?
(starting from which version became valid?)
它 ( class="a b") 是有效的 W3C 语法吗？什么版本的 CSS 和 HTML？（从哪个版本开始生效？）
EDIT: a natural subquestion"W3C say how to interpret it?" (it is an "override" or another renderization behaviour?) was posted here.
编辑：一个自然的子问题“W3C 说如何解释它？” （它是“覆盖”还是其他渲染行为？）发布在这里。
回答by diEcho
these are two different classes a& bseparated by space. see w3c DOCS
这是两个不同的类a＆b由空格隔开。见w3c 文档
class = cdata-list [CS]
class = cdata-list [CS]
this attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
此属性为元素分配一个类名或一组类名。可以为任意数量的元素分配相同的类名。多个类名必须用空格字符分隔。
If you have two class
如果你有两个班级
.a { font-weight: bold; }
.b { font-weight: normal; }
and assign in class="a b"or class="b a", then later class will overwrite the prior class having same property, so font weight will be normal.
并在class="a b"或class="b a" 中分配，然后后面的类将覆盖具有相同属性的先前类，因此字体粗细将是正常的。
If you change the CSS definition order,
如果更改 CSS 定义顺序，
.b { font-weight: normal; }
.a { font-weight: bold; }
now the later class is bold, so "overwrite the prior class having same property" results font weight bold.
现在后面的类是粗体，所以“覆盖具有相同属性的先前类”会导致字体粗细。
回答by Jason
This is supported in IE 7 and up, including all modern, non-IE browsers. As other commenters have pointed out, it is actually a list of classes, not a single class with spaces.
这在 IE 7 及更高版本中受支持，包括所有现代非 IE 浏览器。正如其他评论者指出的那样，它实际上是一个类列表，而不是一个带有空格的类。
A better way to understand this is to give your example a few more options:
理解这一点的更好方法是为您的示例提供更多选项：
<tag class="a b">....</tag>
<tag class="a">....</tag>
<tag class="b">....</tag>
.a.b {}in your css will target the first tag..a {}will target the first and second tags..b {}will target the first and third tags.
.a.b {}在您的 css 中将定位第一个标签。.a {}将定位第一个和第二个标签。.b {}将定位第一个和第三个标签。
This is why using multiple classes on a single element can be very helpful.
这就是为什么在单个元素上使用多个类会很有帮助的原因。
For questions of CSS selectors and pseudo selectors, I like to use this (slightly outdated) table http://kimblim.dk/css-tests/selectors/
对于 CSS 选择器和伪选择器的问题，我喜欢使用这个（稍微过时的）表http://kimblim.dk/css-tests/selectors/
回答by Sajjan Sarkar
a single class name cannot have spaces. an element can have multiple classes defined by listing the class names separated by a space
单个类名不能有空格。一个元素可以通过列出以空格分隔的类名来定义多个类
回答by Ennui
That won't work in the CSS file OR the HTML. <div class="a b c"></div>means the div element has class a AND class b AND class c.
这在 CSS 文件或 HTML 中不起作用。 <div class="a b c"></div>表示 div 元素具有类 a AND 类 b AND 类 c。
Meanwhile, on the stylesheet side of things, .a b c { property: value; }is not valid because it literally means "element c with ancestor b with ancestor having class a" (and b and c are obviously not valid HTML elements) while .a .b .c { property: value; }would mean "element having class c with ancestor element having class b with ancestor element having class a". Look up CSS specificity rules if this makes no sense to you.
同时，在样式表方面，.a b c { property: value; }它是无效的，因为它的字面意思是“具有祖先 b 且祖先具有类 a 的元素 c”（并且 b 和 c 显然不是有效的 HTML 元素）而.a .b .c { property: value; }意味着“具有类 c 的元素具有祖先具有类 b 的元素和具有类 a 的祖先元素”。如果这对您没有意义，请查看 CSS 特异性规则。
Use dashes or underscores instead of spaces.
使用破折号或下划线代替空格。
