這個css選擇器做了什麼？

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

它會選擇這個元素：

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

或者同時與text-box和multi-line類有關的任何元素。

Answer 4

它選擇一個元素是這樣的：

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

有都的text-box和multi-line類的任何元素。

Answer 5

這裏有一個小巧的小提琴以示區別：

http://jsfiddle.net/sGn2v/

基本上它會匹配兼具類的元素！