CSS 특이성은 상속된 속성에 어떤 영향을 미칩니까?

CSS 속성 상속: 특정성 수수께끼

CSS 규칙을 웹 요소에 적용할 때 특정성 개념은 어떤 요소를 결정하는 데 중요한 역할을 합니다. 규칙이 우선 적용됩니다. 그러나 이 맥락에서 상속된 속성을 처리하는 것은 종종 의문을 제기합니다.

상속된 스타일은 상위 요소에서 하위 요소로 전달되는 속성입니다. 상속된 속성의 구체성이 직접 대상 규칙의 구체성과 어떻게 비교되는지 궁금해하는 것이 합리적입니다.

특이성과 상속

일반적인 믿음과는 달리 구체성은 직접적으로 지배되지 않습니다. 상속 재산의 우선 순위. 대신, 요소를 직접적으로 대상으로 하는 CSS 선언의 구체성은 상속된 모든 속성을 대체합니다.

예: 상속된 스타일 재정의

다음 HTML 및 CSS 코드를 고려하세요.

<h2 id="This-should-be-black">This should be black</h2>
<div class="all_red_text">
    <h2 id="This-should-be-red">This should be red</h2>
</div>

.all_red_text { color: red; }

이 경우, .all_red_text div는 기본 브라우저 동작인 검정색을 상속합니다. 색상: 빨간색; .all_red_text의 속성이 이 상속된 스타일을 재정의하고 텍스트가 빨간색으로 표시됩니다.

그러나 아래와 같이 h2 요소를 직접 대상으로 하는 규칙을 추가하면

h2 { color: black; }
.all_red_text { color: red; }

이 개정된 내용에서는 예를 들어, 색상: 검정색; h2 요소에 대한 명시적인 규칙은 상속된 속성보다 우선하므로 모든 h2 텍스트가 검은색이 됩니다.

결론

상속된 CSS 속성은 본질적으로 다음보다 다소 구체적이지 않습니다. 직접 대상 규칙. 직접 대상으로 지정된 규칙의 구체성은 상속된 속성이 상위 요소 또는 사용자 에이전트에서 나오는지 여부에 관계없이 항상 더 높은 우선순위를 갖습니다. CSS에서 상속된 스타일로 작업할 때 예기치 않은 결과를 방지하려면 이 동작을 이해하는 것이 중요합니다.

위 내용은 CSS 특이성은 상속된 속성에 어떤 영향을 미칩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!