css deep

作者：迷失未来发布日期:2026-01-25 浏览:95

/* CSS :deep() 伪类选择器示例 */

/* 假设我们有一个父组件和子组件，父组件中使用了 <style scoped> 来限制样式作用范围 */
<style scoped>
.parent :deep(.child) {
  color: red;
}
</style>

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

/* 解释说明：
   :deep() 是 Vue 3 中用于穿透scoped样式的伪类选择器。它允许你在父组件中定义的样式影响到子组件中的元素。
   在上面的例子中，尽管 .parent 的样式是 scoped 的，但通过使用 :deep(.child)，我们可以使 .child 的文本颜色变为红色。
*/

上一篇：css文字垂直居中

下一篇：css 水平居中