CSS에서는 범위 속성을 사용하여 범위를 설정할 수 있습니다. 스타일 태그에 범위 속성이 있는 경우 해당 CSS는 현재 구성 요소의 요소에만 영향을 미칩니다. 그러나 하위 구성 요소의 루트 노드는 상위 범위 CSS와 하위 구성 요소 범위 CSS의 영향을 받습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
처음 Vue 단일 파일을 접했을 때 스타일 태그의 범위 지정 속성에 대해 약간 혼란스러웠습니다. 결국, 이전에는 범위 지정에 대한 몇 가지 설명이 있습니다.
표준 .vue 파일은 다음과 같습니다.
// html内容区域
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
//相关数据及事件区域，通俗说就是我们写JS代码的地方
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
// CSS样式区域
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello { color: #efefef; }
</style>스타일 태그에 범위 속성이 있는 것을 볼 수 있습니다. 스타일 태그에 범위 속성이 있는 경우 해당 CSS는 현재 구성 요소의 요소에만 영향을 미칩니다. 이는 Shadow DOM의 스타일 캡슐화와 유사합니다. 몇 가지 주의 사항이 있지만 프로필이 필요하지 않습니다. PostCSS를 사용하여 다음과 같은 변환을 수행합니다.
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>변환 결과:
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>로컬 및 전역 스타일 혼합
한 가지 주목할 만한 점은 구성 요소에서 범위가 지정된 스타일과 범위가 지정되지 않은 스타일을 모두 사용할 수 있다는 것입니다.
<style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style>
The 하위 요소 스타일은 하위 요소의 루트 요소와 하위 구성 요소 내 CSS 간의 협력의 결과입니다.
범위 지정을 사용한 후에는 상위 범위의 스타일이 하위 구성 요소에 침투하지 않습니다. 그러나 하위 구성 요소의 루트 노드는 상위 범위 CSS와 하위 구성 요소 범위 CSS의 영향을 받습니다. 이 디자인은 레이아웃 관점에서 상위 구성 요소가 하위 구성 요소의 루트 요소 스타일을 조정할 수 있도록 하기 위한 것입니다. 예는 다음과 같습니다.
하위 구성 요소
<template>
<div class="wrap">
<p>Hello world</p>
</div>
</template>
<style scoped>
.wrap {
color: #ffffff;
background: #666666;
}
</style>상위 구성 요소
<template>
<div class="wrap">
//ChildMOdul为上面的子组件
<ChildModul/>
</div>
</tamplate>
<style scoped>
//子组件根元素样式
.wrap {
margin: 0 10px
}
</style>하위 구성 요소는 배경색을 정의합니다. #effefef 색상 #ccc 스타일의 경우 상위 요소에서 하위 구성요소의 루트 요소에 대해 10px의 테두리가 정의되며 하위 모듈에 표시되는 최종 스타일은 다음과 같습니다. 
As 위 그림에서 볼 수 있듯이 하위 구성 요소의 스타일은 상위 구성 요소에 있는 하위 구성 요소의 루트 요소와 하위 구성 요소에 범위가 지정된 CSS 스타일이 결합된 결과입니다.
깊이 실행 선택기
하위 구성 요소에 영향을 미치는 등 범위가 지정된 스타일의 선택기가 "더 깊게" 작동하도록 하려면 >>> 연산자를 사용할 수 있습니다.
<style scoped>
.a >>> .b { /* ... */ }
</style>위 코드는 다음과 같습니다. 다음으로 컴파일됩니다:
.a[data-v-f3f3eg9] .b { /* ... */ }Sass와 같은 일부 전처리기는 올바르게 구문 분석할 수 없습니다>>>. 이 경우 /deep/ 연산자를 대신 사용할 수 있습니다. 이는 >>>의 별칭이며 잘 작동합니다. 이전 코드를 사용하고 깊이 선택기를 사용하여 상위 구성 요소에서 하위 구성 요소의 스타일을 설정하세요.
상위 구성 요소
.wrap /deep/ .child--css {
font-size: 36px;
}Rendering: 
스타일이 적용된 높이를 보면 하위 구성 요소. Sass 사전 선택기가 표시되지 않으면 >>> 대신 /deep/을 사용하는 이유를 묻고 싶을 수도 있습니다. 작동하지 않았습니다. 그런 다음 /deep/으로 전환했는데 스타일이 효과적이었습니다. 무책임하게 말하면 >>>가 작동하지 않으면 /deep/으로 변경하면 됩니다. 어쨌든 상위 구성 요소에 작성된 스타일이 하위 구성 요소에 침투할 수 있도록 하는 것이 목적입니다. . .
동적으로 생성된 콘텐츠
v-html을 통해 생성된 DOM 콘텐츠는 범위 내의 스타일에 영향을 받지 않습니다. 하지만 심층적인 액션 선택기를 통해 스타일을 지정할 수 있습니다.
이벤트 주의
CSS 범위는 클래스를 대체할 수 없습니다. 브라우저가 다양한 CSS 선택기를 렌더링하는 방식을 고려하면, p{ color: red }에 범위 세트가 있는 경우(예: 다른 속성과 함께 사용될 때 속성 선택 포함) 프로세서)는 몇 배 더 느려질 것입니다. .example { color: red } 와 같이 클래스나 ID를 대신 사용하면 성능에 미치는 영향이 제거됩니다.
재귀 구성 요소의 하위 선택기에 주의하세요. 선택기 .a .b의 CSS 규칙의 경우 .a와 일치하는 요소에 재귀 하위 구성 요소가 포함되어 있으면 .b의 모든 하위 구성 요소가 이 규칙과 일치됩니다.
추천 학습: css 비디오 튜토리얼
위 내용은 CSS 범위를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
