Какая разница между CSS-классами .foo.bar(без пробелов) и .foo.bar(с пробелом)

Ответ 1

Я думаю, у вас есть небольшое недоразумение, что означает первый.

.element .symbol {}

Указывает, что эти настройки CSS применяются к любому элементу HTML с классом .symbol, который находится внутри элемента с классом .element.

<div class="element">
    <div class="symbol" />
</div>

В этом примере ваша первая запись CSS повлияет на тег <div> посередине.

Второй пример означает, что для первого класса требуются два класса. Кроме того, он равен первому.

<div class="element large">
    <div class="symbol" />
</div>

Итак, если HTML выглядит так, значения CSS будут применены к внутреннему тегу <div>.

Если вы хотите установить теги CSS, которые применяются к нескольким классам отдельно, вам нужно разделить их с помощью запятой. Итак, это выглядит так:

.element, .symbol {}

Изменить: по запросу ссылку на документацию для селекторов CSS.

Ответ 2

.element .symbol

означает .symbol внутри .element

.element.symbol

означает .element, который также имеет класс symbol.

Итак,

.element.large .symbol

означает .symbol внутри .element, который также имеет класс large.

Ответ 3

Использование

.element.large

относится к элементу с обеими классами:

<div class="element large"></div>

а не потомок элемента:

.element .large

что означает:

<div class="element">
    <div class="large"></div>
</div>

только

<div class="large"></div>

"получает" стили.

В основном, разделяемое пробелом, подразумевает два элемента с отношением descendant.

Ответ 4

Вы использовали бы .element .symbol здесь, где у вас есть элемент внутри другого элемента. Например:

<div class="element">
    <i class="symbol"></i>
</div>

Если по дороге вы хотели дифференцировать некоторые div, вы можете добавить дополнительный класс для таргетинга только тех, которые отличаются, и настроить его с помощью .element.large .symbol. Итак, например:

<div class="element large">
    <i class="symbol"></i>
</div>

Ответ 5

В вашем втором примере первая часть селектора - это просто элемент с двумя классами, как в <span class="element large"> или <span class="large element">.

В общем, каждая часть селектора применяется к одному элементу HTML.

table[border].clname означает таблицу с атрибутом border и классом clname, а table [border] .clname означает элемент с классом clname в элементе с атрибутом border в таблице.

(Edit: хорошо, я говорю "один элемент HTML", но, конечно, вы можете иметь более одной таблицы, к которой это относится. Вы понимаете.)