선택자 우선순위

티스토리 뷰

CSS

dev-in-daily-life 2022. 2. 2. 11:10

- 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

1. 점수가 높은 선언이 우선함.

2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함.

- 점수

ID 선택자 : 100

Class 선택자 : 10

tag 선택자 : 1

전체(*) 선택자 : 0

인라인 선언 : 1000

- 스타일 속성에 " !important " 를 입력하면 우선순위가 0순위로 적용됨.

ex) .green{ color: green !important; }

- 다음과 같이 스타일 적용 시 div 태그 안의 글자는 어떤 색으로 표시되는가?

<head>

<style>

.green{

color: green;

}

</style>

</head>

<body>

우선순위!

</div>

</body>

=> 인라인으로 선언한 속성이 우선이므로 orange 색으로 표시됨.

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함