범위가 지정된 CSS 사용자 정의 속성이 상속된 값을 재정의하지 못하는 이유는 무엇입니까?

범위가 지정된 CSS 사용자 정의 속성: 상속된 값 재정의

CSS 사용자 정의 속성으로 작업할 때 정의된 범위는 해당 동작에 영향을 미칩니다. 이 경우 범위가 지정된 사용자 정의 속성은 외부 범위에 정의된 변수를 기반으로 크기를 조정하는 데 사용됩니다. 그러나 세 목록이 모두 동일한 규모로 나타나기 때문에 원하는 효과를 얻을 수 없습니다.

범위 지정 문제 이해

-로 정의된 사용자 정의 속성 다른 규칙 내에 중첩된 규칙은 전역 범위로 간주되며 문서 내의 모든 요소에 영향을 미칩니다. 그러나 사용자 정의 속성이 중첩된 규칙 내에 정의되면 해당 규칙과 해당 하위 항목으로 범위가 지정됩니다. 즉, 해당 규칙 외부의 모든 요소는 사용자 정의 속성 값을 상속하지 않습니다.

사용자 정의 속성 재설정

제공된 코드에서 루트 요소는 - -scale 사용자 정의 속성을 기반으로 --size-* 값을 계산합니다. 이후 하위 요소는 자체 --scale 사용자 정의 속성을 정의합니다. 이로 인해 하위 요소가 루트 요소에서 상속된 --scale 값을 재정의하게 됩니다.

이 문제를 해결하려면 하위 요소 내의 --scale 사용자 정의 속성을 새 값으로 재설정해야 합니다. 계산에 사용됩니다. 이렇게 하면 사용자 정의 속성의 범위가 효과적으로 하위 요소와 해당 하위 요소로 지정됩니다.

업데이트된 코드

수정 사항이 포함된 업데이트된 코드 버전은 다음과 같습니다.

: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);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }

html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

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