CSS 특수성

이 기사는 HTML과 CSS에 대한 기본적인 이해를 전제로 합니다.

대부분의 초보자는 페이지의 요소가 스타일을 누적하여 적용되는 모든 규칙을 상속한다는 것을 빠르게 이해하게 됩니다. 그러나 동일한 요소에 여러 규칙이 적용될 때 어떤 일이 발생하는지 이해하는 사람은 거의 없습니다. 더 구체적인 선택자가 우선합니다. 반대로 덜 구체적인 규칙은 무시됩니다.

특이성 계산

선택기가 얼마나 구체적인지 결정하려면 먼저 4가지 범주 각각에 있는 항목 수를 결정해야 합니다.

html style 속성

ids ( id 속성)

기타 속성(class 포함), 유사 클래스(예: :link, :hover)

요소, 유사 요소(예: :before, :after)

각 범주에 항목 수가 있으면 연속적으로 연결하여 최종 값을 형성합니다. 기본이 큰 숫자 체계와 마찬가지로 더 큰 범주의 숫자는 항상 더 작은 범주의 숫자를 능가합니다.

<style type="text/css">
    /* priority: 0,0,0,1 */
    p {
        color: black;
        font-weight: bold;
    }

    /* priority: 0,0,1,1 */
    p.para {
        color: blue;
        margin-left: 1rem;
    }

    /* (smaller priority that p.para)
        priority: 0,0,1,0 */
    .para {
        color: green;
    }


</style>
<!-- (style attribute) priority: 1,0,0,0 -->
<p class="para" style="color: purple">
    Hello World
</p>

이 예에서는 style 속성이 가장 높은 우선 순위를 가지며 적용된 다른 규칙(font-weight, margin-left)을 상속하기 때문에 텍스트가 보라색으로 표시됩니다.

!중요한

적용되는 CSS 규칙을 결정할 때 마지막으로 고려해야 할 사항은 !important 키워드입니다. 이것을 CSS 값에 추가하면 우선 순위가 한 단계 더 높아집니다. !important 규칙은 일반 규칙이 고려되기 전에 다른 !important 규칙과 함께 특정성 순서로 정렬 및 적용됩니다.

그러나 !important를 사용하면 세심하게 제작된 스타일 시트의 디자인이 자주 깨지므로 피해야 합니다!

결론

특정성이 작동하는 방식을 철저히 이해함으로써 선택자의 특정성을 높이거나 낮추어 적용되는 스타일을 쉽게 제어할 수 있습니다. 이를 통해 DRY 원칙을 따르는 간결한 스타일 시트를 우아하게 디자인할 수 있습니다.

이 기사가 마음에 드셨다면 Twitter에서 저에게 인사를 건네거나 더 잘할 수 있는 방법을 알려주세요!

추가 읽기:
https://www.w3.org/TR/CSS2/cascade.html