css 穿透

作者：躲藏我的霸气发布日期:2026-06-12 浏览:54

/* CSS 穿透示例 */

/* 示例 1: 使用 ::ng-deep (Angular 中使用) */
::ng-deep .parent .child {
  color: red;
}

/* 解释: ::ng-deep 是 Angular 中用于穿透封装样式的作用符，它可以让样式作用于子组件中的元素。 */

/* 示例 2: 使用 /deep/ (已废弃，不推荐使用) */
/deep/ .parent .child {
  color: blue;
}

/* 解释: /deep/ 是早期 Vue 和其他框架中用于穿透样式的伪类选择器，但已被废弃，不推荐使用。 */

/* 示例 3: 使用 >>> (适用于一些构建工具) */
.parent >>> .child {
  color: green;
}

/* 解释: >>> 是某些构建工具（如 Webpack）中用于穿透样式的符号，它可以让样式作用于子组件中的元素。 */

/* 示例 4: 使用 :global (适用于 CSS Modules) */
:global(.parent) .child {
  color: purple;
}

/* 解释: :global 是 CSS Modules 中用于定义全局样式的修饰符，它可以让样式作用于全局，包括子组件中的元素。 */

上一篇：css3 loading

下一篇：css 文字颜色