TIL | CSS 선택자 우선 순위

특정 태그에 스타일 속성이 중복되는 경우, CSS는 선택자 우선순위로 속성이 적용된다.

CSS 선택자 ? 🤔
웹 페이지의 HTML 요소를 대상으로 스타일을 지정할 때 사용되는 선택 정보

🎨 선택자 우선 순위

!important > inline style > id Selector > class Selector > tag Selector > universal Selector

• !important : 우선순위 최상위 명령어

  span {
    color: red !important;
  }

• inline style : HTML 문서에서 Tag 내에 style을 정의

    <span style="color: red;">Hello</span>

• id Selector : Tag에 정의한 id로 선택한 경우

  <span id="text">Hello</span>

  #text {
    color: red;
  }

• class Selector : Tag에 정의한 class로 선택한 경우

  <span class="color">Hello</span>

  .color {
    color: red;
  }

• tag Selector : Tag 요소를 선택자로 사용

  span {
    color: red;
  }

• universal Selector : asterisk( * )로 요소 전체를 선택

  span {
    color: red;
  }

🎨 같은 선택자를 사용한 경우 ?

순서 상으로 나중에 작성한 코드로 style이 적용된다.

여러 CSS 파일이 같은 우선순위에 위치해 있을 경우에도, 가장 마지막에 연결/삽입 되어 있는 스타일 시트가 우선순위가 높다.

🔗 참고

https://parkgaebung.tistory.com/72