하위 선택자(descendant selector)는 부모 요소에 포함된 하위 요소 모두에 스타일의 적용되는 것으로 '자손 선택자'라고도 합니다
section p { color: blue; }
<html>
<title>
</title>
<style>
#container ul {
border: 1px dotted blue;
}
</style>
<body>
<section id="container">
<header>HEADER</header>
<ul>
<li>
예약 방법
<ul>
<li>통화</li>
<li>문자</li>
</ul>
</li>
<li>
지불 방법
<ul>
<li>카드</li>
<li>현금</li>
</ul>
</li>
</ul>
</section>
</body>
</html>
section > p {color: blue;}
h1 + p { text=decoration: underline; }
h1 ~ p { text-decoration: underline; }