What is scoped?
On vue file style label, there is a special property: scoped. When a style tag has scoped attributes, CSS styles it can only operate on the current assembly, that is to say, the style is only applicable to the current component elements. By this attribute, the style can be made between the components does not contaminate each other. If all style tags in a project all added scoped, equivalent to achieve a modular style.
/ Deep / analytical depth selection
/ Deep / deep selector assembly for converting the global class or type styles to achieve the purpose of locally acting within the scoped add style, such as to give the sub-class components inside scoped .sys_info_box add style, and. el-card__header global components belong, can not work with the local scoped, can be plus / deep / before .el-card__header
<lang style = " SCSS " scoped> .main -computer / Deep / .el- card__body { padding: 0 ; } </ style> // local (assembly) style sheet, the global component <el-card> Add style