Question

我在ASP.NET MVC项目的默认Site.css文件中发现了这个（对我而言）好奇的CSS样式：

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

.text-box.multi-line只是恰好在其中间有一个点的类的名称，还是两个类的嵌套？或者它完全是另一回事？你能解释一下吗？

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

修改

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

Answer 1

它匹配两个类的项目，即

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

如果项目只有1个类，则不匹配。如果项目具有这两个类加上其他类，它将匹配。

Answer 2

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

它将选择类text-box的元素，该元素也具有类multi-line

这将是相同的：

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

一个例子：

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

Answer 3

它正在选择这样一个元素：

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

任何 text-box和multi-line类的元素。

Answer 4

它将选择此元素：

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

或者包含text-box和multi-line类的任何元素。

Answer 5

这是一个显示差异的快速小提琴：

基本上它会匹配一个有BOTH类的元素！