vue3 :deep() 深度选择器使用

最新推荐文章于 2024-10-18 09:41:30 发布

哈哈哈嗝哈哈哈

最新推荐文章于 2024-10-18 09:41:30 发布

阅读量8.2k

点赞数 7

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43387812/article/details/115351869

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用CSS来设置元素的宽度、高度、背景颜色、边框和圆角。通过深色背景和白色文字的组合，创建了一种强烈的视觉效果。文章详细解释了`box-sizing`属性的作用，并介绍了百分比单位在响应式设计中的应用。

摘要由CSDN通过智能技术生成


#swiper >.swiperContext :deep(p) {
  width: 100vw;
  height:60vw;
  background: #000;
  border:5px solid;
  box-sizing: border-box;
  color: #fff;
  border-radius: 5%;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哈哈哈嗝哈哈哈

关注关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3中less、sass最新的深度选择器 deep()

qq_34070719的博客

03-02

1万+

vue3中深度选择器/deep/ >>> ::v-deep 已经废弃，请使用最新的深度选择器 deep() 今天在写vue3项目的时候，有个元素需要使用到深度选择器，于是还是像以前一样使用了 /deep/ .el-button{ width:80%; } 没想到控制台提示我尝试了第二种深度选择器 ::v-deep 能选中还是提示deep() 最后尝试了:deep()果然不提示了,而且也选中了 :deep( .el

深度选择器{/deep/ ；＞＞＞； ::v-deep }在vue前端项目中使用注意事项

m0_49714202的博客

02-25

912

官网地址:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8 >>> 在vue中需要去掉 lang 就是原生写法css /deep/ 可以在vue中加lang的css预处理器加less和scss, 用的时候有时会报错 ::v-deep 也可以在vue中加lang的css预处理器加less和s

1 条评论您还未登录，请先登录后发表或查看评论

Vue 深度作用选择器 /deep/穿透与scoped

11-23

1942

使用 scoped 后，父组件的样式将不会渗透到子组件中。 <template> <div id="app"> <el-input class="text-box" v-model="text"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text

Vue中的深度作用选择器/deep/

01-07

在我们使用Vue搭建项目的时候，我们经常会用到一些UI框架，如Element，iView，但是有时候我们又想去修改UI框架的样式，当我们修改样式失败的时候，可以尝试一下/deep/，亲测有效。那失败的原因是什么呢？ UI框架的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）。有多种解决方法，推荐使用/deep/。当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。用法如下： /deep/

vue:deep、/deep/、＞＞＞样式能穿透到子组件

weixin_43617604的博客

08-06

435

在scoped标记的style中，只要涉及三方组件，那deep符号会经常被使用，用来修改外部组件的样式。要想修改三方组件样式，只能添加到scoped之外，弊端是污染了全局样式，后续可能出现样式冲突。由于/deep/或者>>>在less或者scss中存在兼容问题，所以不推荐使用了。deep是不支持嵌套的。

vue3中的:deep()深度选择器

m0_64664995的博客

11-15

1万+

scoped 属性是HTML5中的新属性，标签在加上了scoped属性时，样式实现组件私有化，父组件的样式不会渗透到子组件，不会造成局部或全局的污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器::v-deep。

在vue3中怎么使用:deep

热门推荐

海风依旧

10-22

3万+

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

vue样式穿透 ::v-deep的具体使用

10-15

`::v-deep` 是 Vue 2.x 推荐的深度选择器，用于穿透组件的样式隔离。它的工作原理是在 CSS 选择器前添加一个特殊标识，使得选择器能够触及到组件内部的子元素。在 Vue 3 中，`/deep/` 已经被废弃，而 `::v-deep` ...

vue2 深度选择器

John_Crown的博客

01-08

1586

element ui组件库+vue实现了一个简单的登录界面，之后打算修改一下样式，所以设置对应的css样式。

Vue3 中几种独有的选择器 深度选择器:deep()、插槽选择器:slotted()、全局选择器 :global()

码农键盘上的梦

12-01

2555

在Vue中，除了常见的CSS选择器外，还有一些独有的选择器，这些选择器可以更方便地操作Vue组件。

在 Vue.js 中使用:deep() 、::v-deep()、::v-deep、 /deep/还是＞＞＞呢？

weixin_65908792的博客

02-29

1483

现在2024年了，关于Vue的深度选择器（“样式穿透”——不知道谁创造的词）的使用建议该更新了。vue2:建议使用::v-deep，vue3:建议使用:deep()。

vue3 deep深度选择器

月色真美121的博客

03-12

2750

deep选择器

CSS Vue3深度选择器

m0_73461567的博客

02-20

707

原理：在css中使用过选择器的选择过元素 (组件下)元素生成添加一个属性 => data-v-hash值 webpack或vite打包时自动生成添加。2. 当我们在style标签中需要改变vant组件的样式时，需要使用到深度选择器。技术栈：Vue3 TypeScript Vite Vant。背景：scope样式私有化，避免样式冲突。1.在template中的布局。

vue3.x中使用深度选择器 /deep/ ＞＞＞

csl125的博客

06-22

5145

在vue2中使用深度选择器可以使用旧版写法： /deep/ input{ } >>> input{ } 在vue3.x中的写法新版写法： .user-center { &:deep(.tableheader) { background: #f0f6fc; color: #000; } } .user-center { ::v-deep .tableheader { background: #f0f6fc; col..

vue3 样式穿透(:deep())原理

一个希望世界和平的前端程序猿的博客

12-28

3958

scoped通过给元素和css样式添加不重复的data属性(data-v-xxx)来使模块私有化(整个过程通过PostCSS转译实现)。 PostCSS会给一个组件中的所有元素添加一个唯一的data属性(data-v-xxx)，给css选择器添加一个包含该属性的属性选择器，这样就让样式只作用于含有该属性的元素，从而实现样式隔离。

vue3 SFC新的深度选择器

u013611033的博客

10-15

1401

vue3.0的项目再次变更了css深度选择器写法. > footer { height: 1rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; width: 100%; ::v-deep(.van-icon) { //注意这里括号和选择器不要有空格,编辑器会报错 &::before { background-clip:

Vue 深度选择器:deep()与::v-deep详解

CCC_chtt的博客

04-26

2万+

深度选择器:deep()与::v-deep详解

vue ::deep

09-02

在Vue 3中，`::deep`伪类选择器已经被弃用，应使用`:deep()`伪类选择器来代替。这是为了更好地与CSS选择器的规范一致。引用中提到了这个变化，并给出了使用`:deep()`伪类选择器的示例代码: ```html <style> :deep(.class) { } </style> ``` 另外，引用和引用中也给出了在父元素中使用`:deep()`伪类选择器的示例代码: ```html <style lang="scss"> .父元素 { :deep(.class) { } } </style> <style> .父元素class :deep(.class) { } </style> ``` 这些示例代码都展示了如何在Vue 3中使用`:deep()`伪类选择器来进行深度选择器的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3学习：:deep()深度选择器的用法](https://blog.csdn.net/weixin_44001222/article/details/127456078)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]