Понимание селектора дочерних элементов CSS>

Question

В моих тестах стили для правила div > ul также применяются к div ul li ul элементам. Почему дочерний селектор > не всегда применяется?

У меня есть решение для этого, но я хочу понять, почему мне нужно использовать это решение.

В CSS я понимаю, что a b выберет каждый элемент, который соответствует b, который является потомком элемента, который соответствует a. Элемент a может отображаться в любом месте иерархии над элементом b.

Я думал, что понял, что a > b будет выбирать только те элементы, которые соответствуют b, если они являются неотложными дочерними элементами элемента, который соответствует a. Элемент a должен быть прямым родителем элемента b.

Однако в тесте ниже стиль font-weight: bold; применяется ко всем изделиям ul, даже если они не являются непосредственными дочерними элементами элемента div. Чтобы этот стиль не применялся, мне нужно сначала установить конфликтный стиль, как и для свойства color.

Какова логика в CSS, которая заставляет ее работать так, как она делает?

div ul { 
 
    color: black; 
 
} 
 
div > ul { 
 
    font-weight: bold; 
 
    color: red 
 
}

<div> 
 
    <ul> 
 
    <li>red and BOLD 1</li> 
 
    <li>red and BOLD 2</li> 
 
    <li>red and BOLD 3 
 
     <ul> 
 
     <li>black and BOLD 1</li> 
 
     <li>black and BOLD 2</li> 
 
     </ul> 
 
    </li> 
 
    <li>red and BOLD 4</li> 
 
    </ul> 
 
</div>

jsfiddle

Answer 1

Этот эффект не является результатом выбора дочернего селектора. То, что вы видите, является результатом property inheritance.

Значение свойства в CSS определяется 3 правила:

1. Если каскад (в основном, это сводится к тому, «что определяется CSS-файлов и ваш браузер») явно указывает значение, использовать это.
2. Если свойство имеет унаследованное значение и не находится в корне DOM, используйте значение родительского элемента для этого свойства.
3. В противном случае используйте предопределенное начальное значение свойства.

Некоторые свойства, если значение не определено в каскаде, автоматически присваиваются значению 'inherit'. Для вложенного элемента ul вы не определили значение для font-weight, а font-weight - one of those properties, которое по умолчанию равно inherit (обратите внимание на запись «наследование» в таблице вверху), поэтому он будет использовать все, что использует его родительский элемент (который вы определили как полужирный).

Ваш селектор точно выбирает только прямых детей, но правило унаследовано детьми детей, потому что именно так ведет себя это конкретное свойство. Свойство, которое не унаследовано по умолчанию, не повлияет на детей.

#parent { 
 
    font-weight: bold; 
 
}

<span id="parent"> 
 
    All of the text in here is bold, 
 
    <span id="child"> 
 
    even the text in the child. 
 
    </span> 
 
</span>

Answer 2

Он выбирает прямые потомки элементов, да. В этом случае div > ul, он выбирает каждую ul, которая является прямым потомком любого div. Однако он также выбирает потомков. Так это работает.

И как поясняется в комментариях, поскольку свойство font наследуется всеми потомками - вы получаете это.

Answer 3

В вашем CSS:

div > ul { 
    font-weight: bold; 
    color: red 
} 

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

Попробуйте это:

div > ul { 
    font-weight: bold; 
    color: red; 
} 
div > ul ul { 
    font-weight: normal; 
    color: black; 
} 

Это должно сделать вложенная уль не жирный и черный вместо красного.

Answer 4

значение по умолчанию для font-weight и color (для ul и li элементов) является inherit.

Так ваше правило относится только к ребенку ul элемента (значение по font-weight к bold), а затем li элемент наследует это значение.

Если вы имели a элемент с href элементом внутри одного из элементов списка, то он будет синим, так как значение по умолчанию для color для a:link является blue и не inherit.