● 태그 유형 선택자
o CSS: p { ... }
o 예를 들어 이 HTML 요소를 선택하면: <p>Some text...</p>
o 이 선택자는 이 태그 유형의 모든 HTML 요소를 선택합니다.
● 아이디 선택자
○ CSS: #some-id { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <h1 id="some-id">...</h1>
○ 이 선택자는 이 ID가 있는 요소를 선택합니다(페이지당 한 번만 가능)
● 클래스 선택자
○ CSS: .some-class { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <h1 class="some-class">...</h1>
○ 이 선택자는 이 클래스가 있는 모든 HTML 요소를 선택합니다.
● 속성 선택기(신규)
○ CSS: [src] { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <img src="...">
○ 이 선택자는 이 HTML 속성이 있는 모든 요소를 선택합니다.
● 범용 선택기(신규)
○ CSS: * { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <p>....</p><img ...>
○ 이 선택자는 모든 HTML 요소를 선택합니다(상속을 통하지 않고 모든 HTML 요소를 개별적으로 대상으로 지정하는 것처럼 직접 가능).
● 그룹화 선택자/선택자 리스트
○ CSS: p, .some-class { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <p>...</p><h2 class="some-class">...</h2>
○ 이 선택자는 해당 목록의 개별 선택자와 일치하는 모든 요소를 선택합니다.
● 결합 선택자
○ CSS: p.some-class { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <p class="some-class">...</p>
○ 이 선택자는 두 조건을 모두 충족하는 모든 요소를 선택합니다(예: 이 예제에서는 "some-class" 클래스가 있는 "<p>" 요소).
● 의사 선택자
○ CSS: a:hover { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <a>...</a>(사용자가 해당 요소 위로 마우스를 가져갈 때)
○ 이 선택기는 이 "의사 상태"를 충족하는 모든 요소를 선택합니다(즉, 이 예에서 가리키고 있는 모든 링크).
