scoped 개인 역할 영역과 deep selector 깊이 역할 선택기

2044 단어

사유 작용역

原理：
上述代码会通过PostCSS转换成：

하나의 구성 요소의 모든 dom 노드에 유일한 data 속성을 추가하고 css 선택기에 현재 구성 요소에 대응하는 data 속성 선택기를 추가하여 스타일을 사유화합니다.

심도 작용 선택기


만약 scoped 스타일의 선택기가 하위 구성 요소에 더 깊이 영향을 미치기를 원한다면 깊이 있는 선택기>>>를 사용할 수 있습니다.

위 코드는 다음과 같이 변환됩니다.
.a[data-v-f3f3eg9] .b { /* ... */ }

뒤에 있는 클래스에 구성 요소가 없는 data 속성 선택기 때문에 하위 구성 요소 안의 클래스를 선택할 수 있습니다

별명

/deep/는 >>>의 별명으로 Sass, Less와 같은 프로세서가 정확하게 해석되지 않아 >>>로 대체/deep/

응용 프로그램


평소에 프로젝트를 쓸 때 제3자 구성 요소를 사용해야 한다. 예를 들어 iview,element-ui,mint-ui,vux-ui,swiper 등은 제3자 구성 요소의 스타일을 수정하고 싶지만 scoped 속성을 없애고 다른 구성 요소에 영향을 주고 싶지 않다.
방식 1
깊이 사용 선택기 사용:

방식 2
하나의 구성 요소에서 여러 개 style 를 사용할 수 있으며, scoped와 비scoped 스타일을 동시에 사용할 수 있습니다.

프롬프트


HTML 페이지에 탭을 쓴 것처럼, 클래스 이름을 붙이면 스타일을 수정할 수 있으며, 깊이 선택기를 사용할 필요가 없습니다.

문서


scoped

사이트 탐색


사이트 탐색
Vue.js 기반 (설치)
Kotlin 객체 대상 데이터 클래스(Data Classes)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage