CSS의 적용 우선 순위

프론트엔드/CSS

ksge7 2020. 8. 23. 21:15

문서를 쓰다보면 하나의 요소에 여러 개의 스타일이 적용될 수 있고 그로 인해 충돌한다.

이 경우 CSS 적용 우선 순위에 따라 정해진다.

<p style="color: red"> p 태그입니다. </p>

id나 class로 스타일을 적용해도 태그에 직접 'style' 속성값을 주는 인라인 스타일이 가장 먼저 적용된다.

<body>
    <style>
        .hi{ color: red }
        #hello{ color: blue }
    </style>

    <p id="hello" class="hi"> 안녕하세요! </p>

</body>

한 태그에 id값과 class 값이 동시에 부여되고 적용될 경우 id의 스타일을 우선 적용한다.

위 예시 같은 경우는 최종적으로 글자 색상이 'red'가 아니라 'blue'가 적용된다.

<body>

    <style>
        p{ color: green; }
    </style>

    <p> p 태그입니다. </p>

</body>

위와 같이 일반적으로 태그를 선택자로 지정해서 스타일링 하는 경우 id와 class에 밀린다.

최 후순위로 스타일이 적용된다.