css深度选择器

/* 深度选择器示例 */

/* 示例 1: 使用 >>> 深度选择器（适用于 Angular 和 Vue 的旧版本） */
.parent >>> .child {
  color: red;
}

/* 解释：在某些框架中，如 Angular 或 Vue 的旧版本，>>> 深度选择器用于穿透组件的样式隔离，使父组件的样式可以影响子组件中的元素。*/

/* 示例 2: 使用 /deep/ 深度选择器（已废弃，不推荐使用） */
.parent /deep/ .child {
  color: blue;
}

/* 解释：/deep/ 是早期 Vue 和一些 CSS-in-JS 库中使用的深度选择器，但现在已经被弃用，不再推荐使用。*/

/* 示例 3: 使用 ::v-deep 深度选择器（Vue 2.x 中推荐使用） */
.parent ::v-deep .child {
  color: green;
}

/* 解释：::v-deep 是 Vue 2.x 中推荐使用的深度选择器，用于穿透样式作用域，允许父组件样式影响子组件中的元素。*/

/* 示例 4: 使用 :deep() 深度选择器（Vue 3.x 中推荐使用） */
.parent :deep(.child) {
  color: purple;
}

/* 解释：:deep() 是 Vue 3.x 中推荐使用的深度选择器，语法更符合现代 CSS 规范，用于穿透样式作用域，允许父组件样式影响子组件中的元素。*/