[css] 선택자 우선순위

* 우선순위

 

같은 요소가 여러 선언의 대상이 된 경우,

어떤 선언의 CSS 속성을 우선적으로 적용할 지 결정하는 방법

 

1. 점수가 높은 선언의 우선순위가 높다.

2. 점수가 같다면, 가장 마지막에 해석된 (나중에 작성된) 선언의 우선순위가 높다.

 

* 점수 기준

1. important (!)  :무한대(가장 높은 점수)
2. style 속성을 html에 인라인 선언 : 1000점 -> 개발자가 요구할 때만 인라인 선언
3. id 선택자 (#) : 100점
4. class 선택자 (.)  : 10점
5. 가상선택자 : 10점
6. 태그 선택자 : 1점
7. 전체 선택자 (*) : 0점

 

* 주의사항

- 스타일은 위에서 아래로 내려간다 (마크업 순서대로 스타일 작성 권장)

- 아이디는 유일성 /  아이디는 경로 표시 X

- 클래스만 가능

 

가능한 예)

 

 #wrap {}
 #header {}
 # nav .gnb {} 
 #header .inner {} 

 

불가능한 예)

 

#wrap #header #nav {} -> X

 

* 점수 책정 

.con-box {} : 10점

.con-box h2 {} : 10 + 1 -> 11점

.con-box ul li { } : 10 + 1 + 1 -> 12점

#wrap #header h1 {} : 100+100 + 1 -> 201점

 .nav ul li a:hover {} -> :hover 가상 선택자 : 10 + 1 + 1 + 1+ 10 -> 23점

 

 

코드 예시)

 

<style>
      .con-box { background-color: pink; width: 300px; }
      .con-box h2 { background-color: tomato; font-size: 30px;}
      .con-box p { background-color: yellow;}
      .con-box .list { background-color: lime ;}
      .con-box .list li { background-color: skyblue;}

      .con li {background-color: purple; }
     
    </style>

 

 

-> - .con-box .list li 가   .con li 보다 점수가 높기 때문에 bgc 변경 X

 

결과 이미지