Разница между дочерним элементом и децентрированным селектором

Question

Они, похоже, делают то же самое. Я никогда не был уверен, в чем разница.

<style> 
    #a > b > i{ 
     color: blue; 
    } 
    #b b i{ 
     color: red; 
    } 
</style> 
<div id="a"> 
<b><i>text</i></b> 
</div> 
<div id="b"> 
<b><i>text</i></b> 
</div> 

Answer 1

Существует разница.

> является ребенком селектора, который выбирает только прямые /непосредственные элементов, где в качестве #a b i будет выбрать дочерние элементы на любую глубине внутри указанного родителя.

Для разметки:

<div id="a"> 
<b><i>text</i></b> 
</div> 
<div id="b"> 
<b><i>text</i></b> 
</div> 

Оба должны работать, но по-прежнему селектор ребенка является более подходящим в данной ситуации. Рассмотрим это:

<div id="a"> 
<b><i>text</i></b> 
</div> 
<div id="b"> 
<b><i>text</i></b> 
<b><i>text<div><span><i>text</i></span>></div></i></b> 
</div> 

В приведенном выше случае, хотя, селектор ребенок не будет применяться на <i> внутри элемента диапазона в <div><span><i>text</i></span>></div>, который не является прямым потомком <b> элемента.

Дополнительная информация:

CSS Child Selectors

Answer 2

справа от specs

ребенка
Элемент А называется дочерним элементом элемента B, если и только если B является родительский номер A.
Descendant
Элемент А называется потомком элемента B, если (1) А является дочерним В, или (2) А является дочерним относительно элемента С, который является потомком B.