Что делает этот селектор CSS?

Question

Я обнаружил этот (мне) любопытный стиль CSS в файле Site.css по умолчанию проекта ASP.NET MVC:

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

Является ли .text-box.multi-line просто именем класса, в центре которого находится точка, или это вложение двух классов? Или это что-то совсем другое? Вы можете объяснить?

А можете ли вы привести пример использования?

Редактировать

Спасибо за все ответы. Похоже, это упущение на справочной странице w3schools css .

Answer 1

соответствует элементу с обоими классами, т. Е.

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

Он не будет совпадать, если элемент имеет только 1 из классов.Он будет совпадать, если у предмета есть эти два класса плюс дополнительные.

Answer 2

Он выбирает такой элемент:

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

Любой элемент, имеющий и , text-box и multi-line классы.

Answer 3

Это означает, что элемент имеет оба класса.

Он выберет элемент с классом text-box, который также имеет класс multi-line

Thisбудет таким же:

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

Пример:

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

Answer 4

Вот небольшая скрипка, чтобы показать разницу:

http://jsfiddle.net/sGn2v/

в основном это будет соответствовать элементу, имеющему ОБА классы!

Answer 5

Он выберет этот элемент:

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

Или любой элемент с классами text-box и multi-line в этом отношении.