선택자 우선순위 란?
하나의 요소가 여러 선언 대상이 된 경우
어떤 선언을 우선적으로 적용할지 결정하는 방법.
조건1
Css 내용을 Html에 적용할 때 붙는 점수가 높은 선언이 화면에 출력된다.
조건2
점수가 같을 경우, 맨 마지막으로 작성한 코드 내용이 우선 적용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style="color:green;">
</head>
<div id="color_orange"
class="color_yellow"
style="color:green;"> <!-- 2순위 (인라인 선언 - 1000점 -->
Hello World!!
</div>
</html>
div {color:red !important;} /* 1순위 (!important - 9999999점) */
#color_orange {color:orange;} /* 3순위 (ID 선택자 - 100점) */
.color_yellow {color:yellow;} /* 4순위 (Class 선택자 - 10점) */
div {color:blue;} /* 5순위 (태그 - 1점)*/
* {color:darkblue;} /* 6순위 (전체 선택자) - 0점) */
body {color:purple;} /* 상속되지 않음 */
!importnat > Inline Style > id > class > tag
왼쪽부터 오른쪽 방향으로
명시도 우선순위가 높은 순에서 낮은 순으로 간다.
CSS에서 Cascading은 중요한 개념이기 때문에
선택자를 적절하게 사용해서 우선순위를 부여해주는것이 바람직하다고 한다.
[출처_daeyun대윤]
Lesson #7 CSS 사용시 반드시 알아야 할것, 명시도
Lesson #7 CSS 사용시 반드시 알아야 할것, 명시도 CSS 명시도란 ? 오늘은 명시도에 대해 얘기를 해드리고 싶어요. CSS 선택자를 내 맘대로 후다닥 가지고 놀면서 작업하려면 명시도에 대한 이해가 필
iamdaeyun.tistory.com
** 기본 선택자 점수별 순서 (우선 순위 선택자) 기억 해두자.
아래 이미지의 style.css파일 참조!
반응형
'CSS' 카테고리의 다른 글
| [CSS] Margin 외부 여백 (0) | 2024.01.27 |
|---|---|
| [CSS] CSS 속성 (0) | 2023.12.26 |
| [CSS] CSS 상속, 상속되는 CSS속성 (0) | 2023.12.19 |
| [CSS] CSS 선택자 (0) | 2023.12.12 |
| [CSS] CSS 선언 방식, Types of CSS (0) | 2023.12.09 |
