css中 global 和 deep(两个样式穿透) 区别
1.:global(selector)
:这个伪类选择器会选择所有全局的、未被其他样式表覆盖的元素。换句话说,它会匹配所有没有被其他样式表(例如内联样式或外部样式表)所影响的元素。
:global(p) {
color: red;
}
这段代码会将所有 <p>
元素的文本颜色设置为红色,而不受其他样式表的影响。
2.::deep(selector)
:这个伪元素选择器可以选择当前样式表中的所有后代元素,包括子元素、孙子元素等。它主要用于深度选择器,以便在组件化开发中更精确地选择目标元素。
:deep(.container p) {
color: blue;
}
这段代码会将所有位于 .container
元素内部的 <p>
元素的文本颜色设置为蓝色。