[Vue Scoped CSS]

1611 단어
vue를 사용하는 학우들은 반드시 scoped를 낯설지 않을 것이다.

并没有加 scoped 属性在

装换结果为:





html 라벨은 자동으로 유사data-v-f3f3eg9와 같은 속성을 추가하고 css도 .example[data-v-f3f3eg9] 방식으로 변환합니다.
서브어셈블리 루트 요소
서브어셈블리의 스타일을 덮어쓰려면 .example .child { }를 사용합니다.scoped를 사용하면 부모 구성 요소의 스타일이 하위 구성 요소에 침투하지 않습니다.그러나 서브어셈블리의 루트 노드는 영향을 받습니다. 이렇게 하면 모 어셈블리가 레이아웃의 각도에서 서브어셈블리 루트 요소의 스타일을 조정할 수 있도록 설계됩니다.
심도 작용 선택기
유사.example .child { } 양식을 적용하려면 >>> 조작부호를 사용할 수 있습니다.일부 css 프로세서는 >>> 조작부호를 해석할 수 없습니다./deep/로 대체할 수 있습니다.예를 들면 다음과 같습니다.


컴파일:
.example[data-v-f3f3eg9] .child { /* ... */ }

참고 자료
Scoped CSS

좋은 웹페이지 즐겨찾기