【Vue】单文件组件 CSS 功能

一、作用域范围

同一个组件中可以同时包含全局作用域样式和局部作用域样式

• 全局样式：

<style>
/* 全局样式 */
</style>

• 局部样式：
• scoped 属性表示它的 CSS 只会影响当前组件的元素。
• 使用 scoped 后，父组件的样式将不会渗透到子组件中。

<style scoped>
/* 局部样式 */
</style>

二、选择器

2.1、深度选择器【:deep()】

• :deep()：使处于 scoped 样式中的选择器如果想要做影响到子组件。

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

• 示例：

<style lang="less" scoped>
.container-main {
  padding: 0 20px;
}
.box-table {
  width: 100%;
  :deep(.el-table__body-wrapper) {
    max-height: calc(100vh - 280px);
    overflow-y: scroll;
    background-color: red;
  }
}
</style>
<!-- 等价于 -->
<style lang="less" scoped>
.container-main {
  padding: 0 20px;
}
.box-table {
  width: 100%;
  /deep/ .el-table__body-wrapper {
    max-height: calc(100vh - 280px);
    overflow-y: scroll;
    background-color: red;
  }
}
</style>

2.2、插槽选择器【:slotted()】

• :slotted：明确地将插槽内容作为选择器的目标

<style scoped>
:slotted(div) {
  color: red;
}
</style>

2.3、全局选择器【:global()】

• :global：让 scoped 其中一个样式规则应用到全局

<style scoped>
:global(.red) {
  color: red;
}
</style>