CSS 사용자 정의 속성을 사용하여 상위 요소의 값을 상속받을 수 있습니까?

상속된 값을 CSS 사용자 정의 속성에 저장할 수 있습니까?

CSS에서 사용자 정의 속성(CSS 변수라고도 함)은 전체에서 값을 저장하고 재사용하는 편리한 방법을 제공합니다. 문서. 그러나 이러한 변수는 상위 요소의 값을 상속받을 수 있습니까?

샘플 코드를 고려해 보겠습니다.

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  background: var(--color);
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

이 예에서는 .box 요소의 배경색을 상속하려고 합니다. CSS 변수를 사용하는 의사 요소 앞에 :가 있습니다. 그러나 --color 변수는 :root 수준에서 정의되고 :before 의사 요소는 .box 내에 중첩됩니다.

사용자 정의 속성이 우선하므로 배경 설정: :before에 대한 상속은 작동하지 않습니다. 상속된 값을 초과합니다.

해결책: 초기 값 대체

상속된 값을 CSS 변수에 저장하려면 CSS 초기 값을 다음과 같이 활용할 수 있습니다. 대체. 초기 값은 속성의 기본 또는 설정되지 않은 상태를 나타냅니다.

이 경우 코드를 다음과 같이 수정할 수 있습니다.

.box:before {
  ...
  background: var(--color, initial);
  ...
}

initial을 var( --color), --color가 명시적으로 설정되지 않은 경우 상속된 값을 강제로 사용합니다. 이를 통해 상위 요소의 배경색을 상속받을 수 있습니다.

이를 설명하기 위해 .box의 배경색을 회색으로 설정해 보겠습니다. 이 경우 --color를 명시적으로 정의하지 않더라도 :before 의사 요소는 초기 값 fallback으로 인해 여전히 .box의 배경색을 상속합니다.

.box {
  background: gray;
  --color: initial;
}

위 내용은 CSS 사용자 정의 속성을 사용하여 상위 요소의 값을 상속받을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!