这个CSS选择器是做什么用的？

Question

我在一个ASP.NET MVC项目的默认Site.css文件中发现了这个（对我来说）很奇怪的css样式：

.text-box.multi-line
{
    height: 6.5em;
}

"

.text-box.multi-line是一个类的名称，其中间有一个点，不是嵌套两个类。你能解释一下吗？

你能提供一个使用示例吗？

编辑

感谢所有回答。这似乎是w3schools css reference page遗漏的内容。

"

- devuxer

---

关于省略，这并不令人意外，请参考：http://w3fools.com/。 - thirtydot

谢谢@thirtydot，我不知道有那么多人反对w3schools，虽然我个人是知道的，但是了解到有这么多其他人也是好的。 - Ascherer

@thirydot，感谢您提供的链接。有趣的是，HTML Dog（其中一个推荐的网站）也没有我要找的内容:( - devuxer

@DanM：试试 SitePoint：http://reference.sitepoint.com/css/classselector 那个页面讨论了 div.foo.bar。 - thirtydot

@DanM SitePoint有相关参考资料 :) @thirtydot 英雄所见略同。 - Raynos

Answer 1

它匹配同时具有两个类的项，即。

<textarea class="text-box multi-line"></textarea>

如果一个元素只有其中一个类，它将不会匹配。 如果该元素有这两个类以及其他额外的类，它将匹配。

- Erik

Answer 2

选择元素的方法如下所示：

<* class="text-box multi-line"></*>

任何同时拥有 text-box 和 multi-line 类的元素。

- thirtydot

Answer 3

这意味着元素具有两个类。

它将选择一个具有类text-box且同时具有类multi-line的元素。

这与下面的代码相同：

.multi-line.text-box {}
.text-box[class~="multi-line"] {}

一个例子：

<p class="multi-line text-box some-other-class"></p>

- Wesley Murch

Answer 4

它将选择此元素：

<textarea class="text-box multi-line" />

或者任何同时具有 text-box 和 multi-line 类的元素。

- Bryan A

Answer 5

这里有一个快速的小技巧来展示它们之间的区别：
http://jsfiddle.net/sGn2v/
基本上，它将匹配同时拥有这两个类的元素！

- Patricia