css :deep

作者：影之哀伤发布日期:2026-04-01 浏览:78

/* 使用 :deep 选择器穿透样式 */
<style>
.parent :deep(.child) {
  color: red;
}
</style>

<!-- HTML 结构 -->
<div class="parent">
  <div class="child">
    这个文本将会是红色。
  </div>
</div>

解释说明：

:deep 是一个特殊的 CSS 伪类，主要用于在 Vue 或其他组件化框架中，允许父组件的样式穿透到子组件中。
在上面的例子中，.parent 是父组件的类名，而 .child 是子组件中的类名。通过使用 :deep(.child)，我们可以确保 .parent 中定义的样式能够应用到 .child 元素上，即使 .child 是在子组件中定义的。
如果没有 :deep，父组件的样式将无法直接影响子组件的内部元素。

上一篇：css 隐藏元素

下一篇：css video