(vue2||vue3) css【深度选择器||穿透】

1.vue2.0:

• 【.类名】: class类名 【.】
• 【#类名】: id类名【#】
• 【div || span || '标签'】: 标签选择器

CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他

1. !important权重优先级
2. style="color:red;"
3. ID选择器，如：#header，权值为0100
4. 类选择器，如：.header
5. 类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
6. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.

深度选择器，穿透

// 第一种箭头 ('原生css') : >>>
.'类名'>>>.'类名'{样式内容}
// 第二种(预处理器:cass && less) : /deep/
/deep/ .'类名'{样式内容}
// 第二种(预处理器:cass && less) ::v-deep
::v-deep .'类名'{样式内容}

2.vue3.0:

深度选择器，穿透

// 第一种(预处理器:cass && less) : :deep(){}
:deep(.'类名') {样式内容}
// 第二种(预处理器:cass && less) ::v-deep(){}
::v-deep(.'类名') {样式内容}

:slotted(标签或者类名){} // 插槽选择器
:global(标签或者类名){} // 全局选择器

【有错误请指出】