CSS STEP 3 - 충돌

★ 충돌

• 선택자 충돌
• 동일한 태그를 서로 다른 선택자가 동시에 선택했을 때 발생

 

★ 선택자 우선 순위

• 충돌이 발생하면 우선 순위가 높은 선택자가 적용
• 점수 계산
• 선택자 점수 계산

1. 태그 선택자 > 1점	> "사람"
2. 클래스 선택자 > 10점	> "남자"
3. 아이디 선택자 > 100점	> "홍길동"

 

■ 선택자 충돌 ex)

• 동일한 조건 아래 div가 적용됨

/* 선택자 충돌 */
div { color : red;}
div { font-style : italic;}

• 선택자 충돌 + 속성 충돌 아래 div 적용됨

/* 선택자 충돌 + 속성 충돌 */
div { color : red;}
div { color : yellow;}

• 우선 순위가 다른 충돌 id 선택자인 box1이 적용됨

div { color : red;}
.box { color : yellow;}
#box1 { color : olivedrab;}

•  태그 갯수에 따른 충돌 태그2개 인 blue가 적용됨

div {color : red;}	> 1점 (태그 1개)
body > div { color : blue;} > 2점 (태그 2개)

• 같은 조건의 다른 경우 div상세 태그 적용

div#box1 {color : red;} > 101점 
#box1 {color : blue;} > 100점

• 아이디에 클래스를 이어붙인 경우

div#bot1.box { } > 111점

• 상세하게 이어붙인 경우

div#box1.box.one.two { } > 131점

• 우선 순위를 깨고 적용 시킨 경우

.one {
        color : yellow !important;
}