인라인 스타일의 CSS 특정성 문제를 극복하는 방법은 무엇입니까?

CSS 우선 순위: 특정성 극복

주어진 웹페이지에서 왼쪽 여백에 대한 인라인 스타일이 참조된 스타일시트에 의해 재정의되었습니다. 이 문제는 두 스타일의 구체성 차이로 인해 발생합니다.

CSS에서 규칙 지정은 규칙이 적용되는 요소를 지정하는 선택기에 의해 수행됩니다. 선택기의 구체성에 따라 우선 순위가 결정되며, 구체성이 높은 규칙이 낮은 규칙보다 우선합니다.

이 예에서 참조된 스타일시트에는 ".rightColumn {margin: 0; padding: 0; }"를 ".rightColumn " 선택기로 사용합니다. 이 선택기는 ID가 "rightColumn"인 요소 내의 모든 요소와 일치합니다. 인라인 스타일의 "td" 스타일이 상위 요소에 관계없이 모든 테이블 셀 요소에 적용되기 때문에 문제가 발생합니다.

이 문제를 해결하려면 다음 두 가지 옵션이 있습니다.

구체성 사용:

클래스나 ID와 같이 더 높은 특수성 선택기를 추가하여 "td"에 대한 인라인 스타일의 특수성을 높입니다. 예:

<pre class="brush:php;toolbar:false"><style type="text/css">
td#myUnpaddedTable {
    padding-left:10px;
} 
</style>

이 예에서는 선택기 "#myUnpendedTable"(0101)의 구체성이 ".rightColumn *"(0010)의 구체성보다 높으므로 인라인 스타일이 더욱 구체화됩니다.

!important 사용:

인라인 스타일에 "!important"를 추가하면 브라우저가 다른 스타일보다 우선순위를 지정하게 됩니다. 이 접근 방식은 복잡한 스타일시트에서 혼란을 초래할 수 있으므로 피해야 합니다.

위 내용은 인라인 스타일의 CSS 특정성 문제를 극복하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!