(CSS) 우선순위 계산

CSS 우선순위 계산

• 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
• 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선
• 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
• 계산식
  • inline: 1000점
  • id 속성: 100점
  • class, 속성 선택자: 10점
  • element: 1점
• !important를 적용하면 0순위

 

CSS
    <style>
        #id-style { background-color: deeppink; }
        #id-style2 {background-color: deepskyblue; }

        div {
            display: block;
            padding: 30px;
            margin: 30px;
            background-color: gold;
        }

        .class-style3 { background-color: beige !important; }

        .class-style { background-color: greenyellow; }

        .class-style2 { background-color: pink; font-size: 25px; }

        ul > li.li-class { background-color: orange; }

        ul > li { background-color: violet; }

    </style>
    <link rel="stylesheet" href="./css/css.css">
    
css.css
    div{ background-color: purple; }
    
HTML
    <h2>css 우선순위</h2>
    <div style="background-color: aqua;">div 1번(인라인 스타일 우선: aqua)</div>
    <div id="id-style" class="class-style">div 2번(id 점수 우선: deeppink)</div>
    <div class="class-style">div 3번(class 점수 우선: greenyellow)</div>
    <div class="class-style2 class-style">div 4번(같은 속성의 경우 나중에 적용한 속성이 우선: pink)</div>
    <div>div 5번(같은 요소일 경우 나중에 적용한 속성이 우선: purple)</div>
    <ul>
        <li class="li-class">li 1번(점수가 높은 속성이 적용: orange)</li>
    </ul>
    <div id="id-style2" class="class-style3">div 6번(!important 우선: beige)</div>