중첩된 CSS 범위의 사용자 정의 속성이 무시되는 이유는 무엇입니까?

중첩 선언 내에서 CSS 범위가 지정된 사용자 정의 속성이 무시됩니다

CSS 내에서 사용자 정의 속성을 정의할 때 범위가 평가에 어떤 영향을 미치는지 이해하는 것이 중요합니다. 범위가 지정된 사용자 정의 속성은 해당 속성이 정의된 요소 또는 구성 요소 내에서만 로컬로 사용할 수 있습니다. 그러나 외부 범위에서 범위가 지정된 사용자 정의 속성을 사용하려고 시도할 때 일반적인 문제가 발생합니다.

이 특정 경우의 목표는 사용자 정의 속성을 통해 배율 인수를 정의하고 이를 다양한 요소에 적용하는 것입니다. 그러나 설명된 것처럼 모든 목록 요소는 적용된 배율 클래스에 관계없이 동일하게 배율이 조정됩니다.

이 문제를 해결하려면 사용자 정의 속성이 위에서 아래로 평가된다는 점에 유의하는 것이 중요합니다. 이 예와 같이 사용자 정의 속성이 루트 수준에서 정의되면 중첩된 요소 내의 동일한 속성에 대한 모든 후속 정의는 무시됩니다.

다음 단순화된 그림을 고려하세요.

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

여기서 사용자 정의 속성 --color는 루트 수준에서 정의됩니다. 범위 요소 내에서 이를 재정의하려고 하면:

<div>
  <div class="box">
    <span>

중첩된 CSS 선언이 있는 범위 요소는 빨간색으로 변하지 않습니다. 이는 사용자 정의 속성이 루트 수준에서 이미 평가되어 --color를 파란색으로 설정하고 재정의 시도가 무시되기 때문입니다.

반대로, 상속된 --c: red가 있는 범위 요소는 빨간색으로 표시되는 이유는 상위 요소에서 사용자 정의 속성 값을 상속하기 때문입니다.

원하는 효과를 얻으려면 사용자 정의 속성이 중첩된 각 구성 요소 내에서 개별적으로 평가되는지 확인해야 합니다. 이는 루트 수준이 아닌 각 클래스 또는 구성 요소 내에서 로컬로 속성을 정의하여 수행할 수 있습니다.

위 내용은 중첩된 CSS 범위의 사용자 정의 속성이 무시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!