CSS 선택기를 사용하여 Vue.js에서 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?

/deep/, >>> 또는 ::v-deep을 사용하여 Vue.js에서 하위 구성 요소 스타일 지정

Vue.js의 맥락에서 , 특정 CSS 선택기를 사용하여 하위 구성 요소의 세분화된 스타일을 구현할 수 있습니다. 그러나 구현 중에 문제가 발생할 수 있습니다.

Vue 2.0 - 2.6

하위 구성 요소에 침투하여 중첩 요소를 선택하려면 ::v- deep(Sass 포함) 또는 >>>(Sass 제외) Sass)를 CSS 규칙에 다음과 같이 추가하세요.

Sass:

::v-deep .child-class {
    background-color: #000;
}

기타 CSS:

>>> .child-class {
    background-color: #000;
}

Vue 3(및 Vue 2.7)

Vue 3에서 :: v- 접두사는 더 이상 사용되지 않습니다. 대신 통합 :deep 선택기를 사용하세요. 하지만 권장되는 구문은 선택기를 괄호로 묶는 것입니다.

:deep(.child-class) {
    background-color: #000;
}

이 솔루션은 Vue 2 최종 릴리스인 Vue 2.7에도 적용 가능합니다. .

Vue의 추가 선택기 3

1. :slotted(.slot-class): 을 통해 전달된 콘텐츠를 대상으로 합니다.
2. :global(. my-class): 범위가 지정된 요소에서도 전역적으로 특정 요소에 적용됩니다.

모든 선택자는

추가 고려 사항

• /deep/ 구문은 모든 버전에서 더 이상 사용되지 않습니다.
• ::v-prefix는 Vue 3에서 더 이상 사용되지 않으며 위.
• >>> Vue 3 이상에서는 구문이 더 이상 사용되지 않습니다.

이러한 스타일 지정 기술을 적용하면 Vue.js 애플리케이션의 하위 구성 요소 내 요소의 모양을 효과적으로 대상으로 지정하고 사용자 정의할 수 있습니다.

위 내용은 CSS 선택기를 사용하여 Vue.js에서 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!