CSS 우선순위: 인라인 스타일이 재정의되는 이유

CSS에서 스타일은 규칙의 우선순위에 따라 요소에 적용됩니다. 여러 규칙이 동일한 요소를 대상으로 하는 경우 우선 순위가 가장 높은 규칙이 적용됩니다.

제공된 예에는 오른쪽 열이 있는 테이블 내의 td 요소에 대해 padding-left: 10px를 설정하는 인라인 스타일이 있습니다. ID. 그러나 참조된 스타일시트의 스타일은 .rightColumn 클래스 내의 모든 요소에 대해 여백과 패딩을 0으로 설정합니다. 문제는 참조된 스타일시트의 스타일이 더 높은 우선순위를 가지므로 인라인 스타일이 재정의된다는 것입니다.

구체성 계산

CSS 우선순위는 다음의 특이성에 따라 결정됩니다. 규칙. 구체성은 다음 기준에 따라 계산됩니다.

1. 인라인 스타일 선언은 구체성에 1점을 기여합니다(a = 1).
2. 선택기의 각 ID는 10점을 기여합니다(b = n ).
3. 선택기의 각 클래스 또는 의사 클래스는 1점을 기여합니다(c = n).
4. 선택기의 각 요소 또는 의사 요소는 1점을 기여합니다(d = n).

예를 들어 선택기가 .rightColumn *인 규칙의 구체성은 0010(a = 0, b = 0, c = 1, d = 0)인 반면 선택기 td가 있는 규칙은 특이도는 0001(a = 0, b = 0, c = 0, d = 1)입니다. 0010이 0001보다 크므로 참조된 스타일시트의 규칙이 더 높은 우선순위를 갖습니다.

문제 해결

이 문제를 해결하고 인라인 스타일을 적용하려면 다음을 수행해야 합니다. 두 가지 옵션:

1. !important 사용: 인라인 스타일에 !important를 추가하여 중요도를 높일 수 있습니다. 그러나 이 접근 방식은 유지 관리가 어려울 수 있으므로 가능하면 피해야 합니다.
2. 규칙 구체성 높이기: 인라인 스타일에 보다 구체적인 선택기를 추가하여 구체성을 높일 수 있습니다. 예를 들어, 테이블 셀에 클래스 이름을 추가하고 .rightColumn .myUnpendedTable과 같은 선택기를 사용하여 스타일을 지정할 수 있습니다. 이렇게 하면 인라인 스타일의 구체성은 0011이 되며, 이는 참조된 스타일시트(0010)의 규칙의 구체성보다 높습니다.