인라인 스타일을 사용할 때 외부 스타일시트에서 충돌하는 CSS 규칙을 재정의하려면 어떻게 해야 합니까?

CSS 우선 순위: 특이성 이해

이 시나리오에서는 rightColoumn ID의 테이블 셀에 적용된 인라인 스타일 padding-left: 10px가 충돌하는 규칙에 의해 재정의됩니다. 외부 스타일시트에서. 참조된 스타일시트에는 rightColumn 클래스 내의 모든 요소에 대해 여백과 패딩을 0으로 설정하는 규칙이 포함되어 있습니다.

CSS 특정성의 개념

어떤 CSS 규칙이 우선할지 결정하려면 특정성이라는 개념이 필요합니다. 작용합니다. 구체성은 CSS 규칙의 선택자가 얼마나 구체적인지를 나타내는 척도입니다. 선택자가 더 구체적일수록 그 특이성이 높아집니다.

특이성 계산

CSS 2.1은 특이성 계산을 위해 다음과 같은 규칙을 정의합니다.

• 선언이 다음과 같은 경우 1을 계산합니다. 스타일 속성(인라인 스타일)에서, 스타일 속성이 아닌 경우 0입니다.
• 선택기의 ID 속성 수를 계산합니다.
• 다른 속성 및 유사 클래스의 수를 계산합니다.
• 선택기에서 요소 이름과 의사 요소의 수를 셉니다.

이 네 가지 값은 a-b-c-d 형식으로 연결됩니다. 여기서 a는 첫 번째 규칙, 두 번째 규칙의 b 등입니다. 숫자 값이 높을수록 구체성이 높아집니다.

주어진 사례에 구체성 적용

이 경우 인라인 스타일의 구체성은 0001(ID 속성 없음, 다른 속성 또는 없음)입니다. 의사 클래스, 하나의 요소 이름). 외부 스타일시트의 충돌하는 규칙은 0010의 구체성을 갖습니다(ID 속성 없음, 다른 속성 또는 의사 클래스 1개, 요소 이름 없음).

0010이 0001보다 높으므로 외부 스타일시트의 규칙은 우선순위를 적용하고 인라인 스타일을 재정의합니다.

특정성 문제를 극복하기 위한 두 가지 솔루션

충돌하는 규칙을 재정의하려면 두 가지 주요 옵션이 있습니다.

1. 사용 !important: 인라인 스타일에 !important를 추가하면 인라인 스타일이 더 중요해지고 충돌하는 규칙이 무시됩니다. 그러나 이는 혼란을 초래할 수 있으므로 자제해서 사용해야 합니다.
2. 보다 구체적인 선택기 사용: 문제의 테이블 셀에 클래스나 ID를 추가하여 인라인 스타일을 수정하세요. 이렇게 하면 외부 스타일시트의 충돌하는 규칙보다 구체성이 더 높은 새 규칙이 생성됩니다.

위 내용은 인라인 스타일을 사용할 때 외부 스타일시트에서 충돌하는 CSS 규칙을 재정의하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!