목차
접기
728x90
반응형
<!-- 후손 선택자, 자손 선택자 -> 하위 선택자로 통일을 하도록 한다. -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하위선택자</title>
<style>
h1 + p {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<p>객실을 예약하려면?</p>
<ul>
<li>예약 방법
<ul>
<li>직접 통화 : 000-0000-0000</li>
<li>문자 메시지 : 000-0000-0000</li>
</ul>
</li>
<li>상세 요금
<ul>
<li>1인실 : 40,000원</li>
<li>2인실 : 60,000원</li>
<li>3인실 : 80,000원</li>
<li>4인실 : 100,000원</li>
</ul>
</li>
</ul>
</section>
</body>
</html>
h1 + p의 의미는 h1에서 가장 가까운 형제인 p를 찾아서 css를 적용시킨다는 의미이다.
만약 h1 + ul이라고 작성한다면 css는 제대로 적용되지 않는다.
그 이유는 h1의 가장 근접한 형제는 p이기 때문이다!
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 반응 선택자(link, visited, active, hover...) (0) | 2021.06.03 |
|---|---|
| table 하위 선택자 사용법 (0) | 2021.06.03 |
| *= 속성 선택자 사용법 (0) | 2021.06.02 |
| '$= 선택자 사용방법'과 파일 다운로드 받을 수 있게 하는 방법 (0) | 2021.06.02 |
| 틸드 선택자를 사용해서 css 적용하는 방법(원하는 클래스명과 일치하는 요소 찾기/클래스명 포함하는 요소 찾기 등) (0) | 2021.06.02 |