[ CSS ] 선택자 활용 기초

■ 타입 선택자
: 문단, 앵커, 제목 엘리먼트 같은 특정 유형의 엘리먼트를 지정하는데 사용
ex)
p { color: black; }
a { text-decoration: underline; }
h1 { font-weight: bold; }
 
 
■ 하위 선택자
: 특정 엘리먼트나 엘리먼트 묶음의 하위에 나오는 엘리먼트를 지정하는데 사용
ex)
li a { text-decoration: none; }
 
■ ID(#) 또는 클래스(.) 선택자
ex)
#intro { font-weight: bold; }
.datePosted { color: green; }
 
<div id="intro"></div>
<div class="datePosted"></div>
 
■ 혼합사용
ex)
#mainContent h1 { font-size: 1.8em; }
#secondaryContent h1 { font-size: 1.2em; }
 
<div id="mainContent">
<h1>냥냥</h1>
</div>
<div id="secondaryContent">
<h1>킁킁</h1>
</div>
 
■ 전체 선택자(*)
ex)
* {
     padding: 0;
     margin: 0;
}
 
■ 속성 선택자
: 속성 존재 여부나 속성값에 따라서 엘리먼트를 지정하는데 사용
ex)
<abbr title="cascading Style sheets">CSS</abbr>
 
abbr[title] { border-bottom; 1px dotted #999; }
abbr[title]:bover { cursor: help; }
 
■ 적용순위
 - 인라인 스타일인 경우 a=1
 - b=ID 선택자의 개수
 - c = 클래스, 유사 클래스, 속성 선택자의 개수
 - d = 타입 선택자, 유사 엘리먼트 선택자의 개수
 
ex)
style=""
#wrapper #content {}
#content .datePosted {}
div#content {}
#content {}
p.comment .dateposted {}
p.comment {}
div p {}
p {}
 
설명 :
style 속성을 사용한 규칙은 어떤 규칙보다도 우선순위가 높다.
ID를 사용한 규칙은 ID를 사용하지 않는 규칙보다 우선순위가 높다.
클래스 선택자를 사용한 규칙은 타입 선택자만을 사용한 규칙보다 우선순위가 높다.
동일한 지정순위를 갖는 규칙일 경우 나중에 나온 규칙이 적용된다.