CSS 선택자(SELECTOR) #6

📝 CSS 개요 및 선택자(SELECTOR)
#230213

📌 선택자 우선순위

기본적으로 css 속성은 style태그 또는 css파일에
작성된 순서(위->아래)대로 해석이 진행되지만
같은 요소에 여러 css 속성이 설정되는 경우, 우선순위가 적용된다.

💻 알아둬야 할 것!

1) 동일한 우선순위로 css 속성이 설정된 경우
-> 제일 마지막에 작성된 css 속성이 반영된다.

2) 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면
-> 모두 반영된다.

1순위 : css 속성 : 속성값 !important;

2순위 : inline-style 속성 (요소에 직접작성되는 style 속성)

<!-- 1순위 : !important 속성값 -->
div {
	width: 200px;
    height: 200px;
    background-color: red !important;}
----------------------------------
<!-- 2순위 : inline-style -->
<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div>

3순위 : 아이디 선택자 (#아이디 속성명)

#test1 { 
    height: 100px;
    background-color: black;
    color: white;}
---------------------------------------    
<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div>    

4순위 : 클래스 선택자 (.class 속성명)

.cls1 {
    background-color: green;}
---------------------------------------    
<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div> 

5순위 : 태그 선택자 (태그명)

div {
	width: 200px;
    height: 200px;
    background-color: red;}