selectorA selectorB {
    /* ... */
}
div p {
    background-color: yellowgreen;
}
div article {
    border: 1px dashed red;
}
<h2>자손 선택자</h2>
<p>p 요소입니다.</p>
<div>
    <p>앞에서 지정한 div 요소의 타깃 자손 요소인 p를 모두 선택합니다.</p>
    <p>앞에서 지정한 div 요소의 타깃 자손 요소인 p를 모두 선택합니다.</p>
    <article>
        <h3>article</h3>
        <p>앞에서 지정한 div 요소의 타깃 자손 요소인 손자 p도 선택합니다.</p>
    </article>
</div>
브라우저에서 실제 표시된 모습
li {
    list-style-type: disc;
}
li li {
    list-style-type: circle;
    color: red;
}
<ul>
    <li>
        <div>아이템 li</div>
        <ul>
            <li>서브아이템 li li</li>
            <li>서브아이템 li li</li>
        </ul>
    </li>
    <li>
        <div>아이템 li</div>
        <ul>
            <li>서브아이템 li li</li>
            <li>서브아이템 li li</li>
        </ul>
    </li>
</ul>
브라우저에서 실제 표시된 모습
selectorA > selectorB {
    /* ... */
}
div > p {
    background-color: yellowgreen;
}
article {
    border: 1px dashed red;
}
<h2>자식 선택자</h2>
<p>p 요소입니다.</p>
<div>
    <p>앞에서 지정한 div 요소의 타깃 자식 요소인 p를 모두 선택합니다.</p>
    <p>앞에서 지정한 div 요소의 타깃 자식 요소인 p를 모두 선택합니다.</p>
    <article>
        <h3>article</h3>
        <p>손자 p는 선택하지 않습니다.</p>
    </article>
</div>
브라우저에서 실제 표시된 모습