CSS 범위가 지정된 사용자 정의 속성은 상속 및 재정의를 어떻게 처리합니까?

CSS 범위 사용자 정의 속성: 범위 및 상속 이해

CSS 사용자 정의 속성을 정의할 때 원하는 효과를 얻으려면 범위를 이해하는 것이 중요합니다. 요소 내에 선언된 사용자 정의 속성의 범위는 해당 요소와 해당 하위 항목으로 지정됩니다. 그러나 이 범위 지정은 이 질문에 설명된 것처럼 때로는 예상치 못한 동작으로 이어질 수 있습니다.

제공된 코드에서 사용자 정의 속성 --scale이 루트 수준에서 정의된 다음 재정의된다는 사실에서 문제가 발생합니다. 하위 요소 내에서. 범위가 지정된 사용자 정의 속성을 사용할 때는 이러한 재정의 동작이 예상되지 않습니다.

이 문제를 설명하기 위해 CSS를 분석해 보겠습니다.

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

여기서 --size-* 속성은 값에 따라 달라집니다. --scale. 그러나 .scale-1x, .scale-2x 및 .scale-3x 클래스 내에서 --scale을 정의하면 :root에 정의된 값이 재정의됩니다.

예상되는 동작은 -- 정의된 각 요소에서 scale 속성을 평가해야 하므로 각 목록의 글꼴 크기가 달라집니다. 그러나 사용자 정의 속성이 이미 루트 수준에서 평가되었기 때문에 이런 일이 발생하지 않습니다.

이 문제를 해결하고 원하는 효과를 얻으려면 범위가 지정된 사용자 정의 속성을 보다 일관되게 사용하는 것이 좋습니다. 예를 들어 각 .scale-* 클래스 내에서 --size-1, --size-2 및 --size-3을 정의하여 해당 요소로만 범위가 지정되도록 합니다. 이렇게 하면 해당 클래스 내에 정의된 --scale 값을 기반으로 각 목록의 독립적인 크기 조정이 가능해집니다.

위 내용은 CSS 범위가 지정된 사용자 정의 속성은 상속 및 재정의를 어떻게 처리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!