Названия классов, объединенные или разделенные пробелом

Когда вы разделяете классы стилей с пробелом? Так, например: в чем разница между следующими двумя блоками css?

Блок 1:

div {
    color: brown;
}

div.special {
    font-size: 18px;
}

Блок 2:

div {
    color: brown;
}

div .special {
    font-size: 18px;
}

Это HTML:

<div class="special">The quick brown fox jumps over the lazy dog.</div>

Я пробовал обе версии. Только с блоком 1 текст будет иметь размер шрифта 18.

Ответ 1

Вы разделяете классы пробелом, когда хотите обратиться к элементу потомка, и вы объединяете их, когда хотите обратиться к одному элементу с несколькими классами.

Например, для ссылки на div с двумя классами, например. <div class="foo bar"> вы можете использовать:

div.foo.bar {...}

Чтобы ссылаться на элемент дочернего span <div class="foo"><span class="bar">stuff</span></div>, вы можете использовать:

div.foo .bar {...}

Ответ 2

Пространство указывает на вложенность:

div .foo /* .foo is inside div */

Отсутствие пробела указывает на дополнительную специфичность:

div.foo /* any div that is also .foo */

Ответ 3

div.special относится к

<div class="special"> <- this

div .special относится к

<div>
    <p class="special"> <-  this
</div>

Не обязательно a p BTW

Ответ 4

Пространство отмечает, что это дочерний элемент.

div.special

задает div, у которого есть класс special, а

div .special

задает элемент с классом special внутри элемента div

Ответ 5

div.special выберет элемент div, у которого есть класс .special, и он не будет выбирать любой другой элемент с классом .special, поэтому, если у вас есть что-то вроде <ul class="special">, будет исключено, где в качестве этого div .special выберет все элементы, имеющие класс .special, которые вложены внутри div, поэтому он выберет <ul class="special">, чтобы он заключил, что первый из них более строгий, чем второй

Итак, в вашем случае вы можете просто использовать .special или использовать div.special