뇌 채우기 공간

[html][css] css적용 우선순위 점수 본문

WEB/html,CSS

[html][css] css적용 우선순위 점수

자바칩 프라푸치노 2021. 4. 15. 15:48

우선순위 결정

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

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

 

1. 명시도 점수가 높은 선언이 우선

2. 점수가 같은 경우, 가장 마지막에 해석되는 선언이 우선

3. 명시도는 상속 규칙보다 우선

4. !important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)

 

div{
  color:blue !important;
}

!important : 점수 무한대

 

<body>
  <div id="color_yellow" class="color_green" style="color:tomato; font-size:20px" >Hello</div>
</body>

인라인 선언 방식 : 점수 1000점

 

#color_yellow{
  color:yellow;
}

 id선택자: 100점

 

.color_green{
  color:green;
}

클래스 선택자:10점

 

태그 선택자 점수 :1점

전체 선택자: 0점

상속: 항상 우선하지 않음. 점수 없음

728x90
저작자표시 비영리 변경금지 (새창열림)

'WEB > html,CSS' 카테고리의 다른 글

[html][css] css 속성 - 배경 background/ color image repeat position attachment size  (0) 2021.04.16
[html][css] css 단위/ px % em rem vw vh vmax vmin  (0) 2021.04.16
[html][css] 선택자 전부 다 / 기본선택자/ 복합 선택자 / 가상 클래스 선택자/ 가상요소 선택자/ 속성선택자  (0) 2021.04.15
[html][css] css에서 다른 css링크거는 법  (0) 2021.04.15
[html] 특수기호- 띄워쓰기 출력하기/ 꺽쇠 출력하기  (0) 2021.04.15
'WEB/html,CSS' Related Articles more