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

Question

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

Я заметил этот (для меня) любопытный стиль css на сайте по умолчанию.css файл an ASP.NET проект MVC:

.text-box.multi-line

{

    height: 6.5em;

}

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

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

Edit

Спасибо за все ответы. Это, по-видимому, упущение из справочной страницы W3Schools css.

486 5

css css-selectors

5 ответов:

Comments

Ничего не найдено.

Erik · Accepted Answer · 2011-06-10 23:16:19

Он сопоставляет элемент с обоими классами, т. е.
<textarea class="text-box multi-line"></textarea>
Он не будет совпадать, если элемент имеет только 1 из классов. Он будет соответствовать, если элемент имеет эти два класса плюс дополнительные.

Wesley Murch · Accepted Answer · 2011-06-10 23:16:08

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

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

Это будет то же самое:
.multi-line.text-box {}
.text-box[class~="multi-line"] {}
Пример:
<p class="multi-line text-box some-other-class"></p>

thirtydot · Accepted Answer · 2011-06-10 23:16:47

Он выбирает такой элемент:
<* class="text-box multi-line"></*>
Любой элемент, имеющий оба класса text-box и multi-line.

Bryan A · Accepted Answer · 2011-06-10 23:16:31

Он выберет этот элемент:
<textarea class="text-box multi-line" />
Или любой элемент с классами text-box и multi-line, если на то пошло.

Patricia · Accepted Answer · 2011-06-10 23:20:08

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

Http://jsfiddle.net/sGn2v/

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