개발/CSS(SCSS)

CSS 선택자에도 우선순위가 있다

bokueyo 2023. 3. 2. 08:50

1순위: !important  ( 속성값 바로 뒤에 넣음 / 최상위 명령어임 / 근데 가급적이면 안쓰는게 좋은 듯.)

    -  HTML =>    <span class="CCC">서울</span>

    -  CSS =>     .CCC{ color : blue !important;


2순위: inline 스타일 속성  (태그에 style 먹여서 inline 으로 작성)

    -  HTML =>    <span style="color : blue">서울</span>


3순위: 아이디  

    -  HTML =>    <span id="BB">서울</span>

    -  CSS =>     #BB {color : blue} 


4순위: 클래스     

    -  HTML =>    <span class="AAA">서울</span>

    -  CSS =>     .AAA {color : blue} 


5순위: tag 선택자   (tag를 그대로 선택자로 사용하는것. )

   - 예를 들어서, span { color : blue }   이런식으로 CSS 파일에 tag 선택자를 선언해놓는 것.


6순위: 전체 선택자  (모든 태그에 스타일 먹이는 것)

    -  CSS  =>     *{color : blue}