[前端] 深度选择器deep使用介绍（笔记）

已于 2024-05-15 17:01:53 修改
阅读量1.9k 收藏 11
点赞数 5
分类专栏： 前端 文章标签： 前端 笔记 vue.js
于 2024-05-15 15:22:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/macaiyun0629/article/details/138909113
版权

参考文献

深度选择器

深度选择器deep使用说明

在 Vue 中，为了实现组件内部样式对组件外部元素的穿透覆盖，可以使用 CSS 的 deep 选择器（也称为 >>> 或 /deep/）或 v-deep 指令。然而，这两个方法在 Vue 3 中已经被废弃，推荐使用 ::v-deep 伪类选择器。

示例

<template>
  <div class="my-component">
    <!-- ... -->
最低0.47元/天 解锁文章
/deep/ 深度选择器
Bruce_byan的博客
07-05 396
当style添加scoped时，表示组件私有化，可使组件模块化，其样式不会污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。 但这时需要引用公共组件时，无法改变公共组件样式，此时需要/deep/深度选择器，此时可以修改公共组件样式。 例如a-modal，如下： vue <div class="box"> <a-modal v-model="visibles" :title="title" class="
【Vue项目笔记心得】深度选择器
qiaoyangla的博客
07-13 2200
对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v-xxxx自定的属性。 vue是通过属性选择器给需要添加的元素加上样式。scoped作用：只对当前的组件有用（样式） 在父组件中再添加一个子组件，子组件的根标签，会拥有父组件当中的自定义属性。 注意下面只有div标签有data-v-7ba5b90属性： 如果 子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。这里h3也就相当于根标签了，也具有父组件的data-v-7ba5b90属性：
深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别与用法
qq_43474235的博客
07-21 482
深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。
Vue3.x的深度选择器详细解读
最新发布
ThomasChan123的博客
02-19 631
Vue3.x的深度选择器详细解读
vue3中的:deep()深度选择器
m0_64664995的博客
11-15 1万+
scoped 属性是HTML5中的新属性，标签在加上了scoped属性时，样式实现组件私有化，父组件的样式不会渗透到子组件，不会造成局部或全局的污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器::v-deep。
前端中css穿透样式：deep的用法
wangzhen12138的博客
05-21 1696
在前端开发中，尤其是使用 Vue.js 这样的框架时，有时我们需要在子组件中修改或影响由父组件传递下来的样式。然而，由于组件的封装和样式隔离，直接修改子组件中的样式可能不起作用。在大多数情况下，更好的做法是通过 props 传递样式或类名，以保持组件的封装性和可复用性。选择器会穿透父组件的样式作用域，并选中子组件中类名为。中，它不能用于全局样式或组件外的样式。如果你想从父组件中改变这个子元素的颜色，你可以使用。允许我们选择子组件中的深层嵌套元素，并应用样式。例如，假设你有一个父组件，它传递了一个类名为。
深度选择器的使用
song854601134的博客
04-20 2593
深度选择器 vue2.x /deep/ &::v-deep .a { } vue3.x /deep/ 下面两种都可以（ "vue": "^3.0.0"） &::v-deep(.a) { } &::v-deep .a { } 没生效的原因和解决方案 搞了很久后，找到资料说，是由于vue的组件版本太低导致的，就是这俩货： "vue-loader": "^11.3.4", "vue-style-loader": "^2.0.5", vue-
css深度选择器deep
qq_38806666的博客
12-18 1万+
css深度选择器deep
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 1022
前端第一部分：Vue（Ⅰ）
vue2.0开发入门笔记之.vue文件的生成和使用
08-29
为避免这种问题，可以使用 `scoped` 属性来限制样式的作用域，或者使用深度选择器（>>> 或 /deep/）来穿透作用域。 4. **脚本（Script）**： - `script` 部分用于编写 JavaScript 代码，通常包含组件的定义。在 `...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 4183
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
CSS中的深度选择器 deep 详解
exlink2012的专栏
12-19 2259
在Vue等框架中，当我们使用组件作用域样式（Scoped CSS）时，有时需要修改子组件内部的样式。这时就需要用到深度选择器。深度选择器是在使用组件作用域样式时的重要工具，它让我们能够在不破坏组件封装的前提下修改子组件样式。但应该谨慎使用，优先考虑其他更好的样式解决方案。
deep选择器
深圳最菜前端
05-07 293
最近写vue element 管理后台安利到一个小技巧 使用UI框架，好处就是可以帮助你快速构建一个项目，但是也有很多不方便的地方，修改样式便是其中之一 // 这样 .el-table--enable-row-transition{ .el-table__body-wrapper{ .el-table__body{ background: c...
深度选择器的三种使用方式
weixin_47886687的博客
10-23 1077
在vue中,当< style>标签有scoped属性是,它的css制作用与当前组件的元素. 也就是在我们日常开发中,父组件不能直接作用于子组件,这时候有两个方法: 一是把scoped去掉,但是这样的话不仅是自己会影响别的元素,别的元素也会影响自身,所以这个方法一般不会使用. 二是在样式前面添加/deep/或::v-deep,还有个>>>,箭头方法会有兼容问题,像Sass之类的预处理器无法正确解析 ...
/deep/深度选择器
qq_45146135的博客
09-06 115
对el-form的表单的label标签进行样式更改时，发现定位到label元素设置之后并不生效，尽管使用！important也无用，经过查找发现要在需要修改元素的类名前，加上/deep/深度选择器， 除此之外，把/deep/换成>>>可以获得相同效果 ...
/deep/深度作用选择器作用及使用
热门推荐
weixin_45842655的博客
12-15 2万+
初始/deep/时百度搜索看了好多人的文章,有些内容不全有些理解错误(仅个人观点) 自己记录下 1.在了解/deep/之前需先了解scoped属性作用 看博文https://blog.csdn.net/weixin_45842655/article/details/103490900或者点我跳转 2.看官方文档 比较全面 https://vue-loader.vuejs.org/zh/guide/...
深度选择器
QZ9420的博客
01-03 334
1、scoped属性的作用 加上之后只对当前样式生效，对于某一个组件，如果style添加上scoped属性,给当前子组件的结构中都添加上一个data-v-xxxx自定属性 会发现vue是通过属性选择器，给需要添加的元素添加上样式 例如： h3[ data-v-7ba5bd90] 2:子组件的跟标签 （拥有父组件当中自定义属性:一样的)，如果子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。 注意: 如果父组件的样式(scoped)，而且还想影响到子组件的样式?像这种情况我们可以使用深度选择器。
使用deep修改前端框架中的样式
m0_72167535的博客
07-02 1404
使用deep修改前端框架中的样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值