css : css선택자 적용 우선순위 정리

✔ 태그 선택자

 p {

 color: red;

}

 

 

✔ 클래스 선택자

.class {

color:red

}

 

 

✔ 아이디 선택자

#class {

color:red

}

 

 

✔ 태그와 함께 쓰는 선택자

p태그 안에서 class 네임을 가진 클레스를 선택하는것 ,

 

p.class{

 color: red ;

}

 

 

 

CSS의 우선순위

중복되기 쉽기 때문에 우선순위로 지정이 된다.

 

1부터 위에가 가장 우선순위! 

1. !important style 

2. Inline Style

3. ID 선택자

4. Class 선택자

5. 태그 선택자

<style>
   
   h1 {
    color:red;
   }

   .text {
    color:black
   }

   #text {
    color:green;
   }


  </style>

<h1>CSS 적용순위 -태그</h1>
<h1 class="text">CSS 적용순위 - 클래스</h1>
<h1 id="text"  >CSS 적용순위 - 아이디</h1>
<h1 >CSS - 적용순위 - 인라인</h1>
<h1>CSS - 적용순위 !important</h1>

h1 태그에 color: 을 red로 주었지만

class가 우선순위가 더 높아 black으로 하면 변경되고

# id 값도 h1태그보다 우선순위가 높아 green으로 하면 변경된다.

 

 

✔인라인요소는 

<h1 class="text" style="color: gold">CSS 적용순위 - 클래스</h1>

예시로 이렇게 지정을 하면 h1의 빨강색이 아닌 gold 요소가 적용순위가 높아 색이 변한다.

 

 

✔ ! important 는 가장높은 요소로 

   h1 {    color:red !important;   }

이렇게 h1 태그에 red로 !important를 하면 다른 요소보다 가장 높기때문에 

아무리 컬러 색을 바꿔도 빨강색으로 출력된다.