CSS深度(穿透)选择器

前言：

今天在项目开发过程中，使用 Element UI 的走马灯(轮播图)组件，想去改左右箭头样式和下面的小圆点。使用发现改不了发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）。今天总结一下提升记忆。

    <el-carousel height="150px"><el-carousel-item v-for="item in 4" :key="item"><h3 class="small">{{ item }}</h3></el-carousel-item></el-carousel>

当时我是要修改底部的横线变成4个小圆点

这是选中了轮播图，但是样式还是没有改变。

<style scoped>.el-carousel__button{width:10px;height:10px;background:red;border-radius:50%;}
</stylet>

这时候就要用上我们的样式深度(穿透)选择器

原生css在类名前面加三个>就可以了

<style scoped>>>>.el-carousel__button{width:10px;height:10px;background:red;border-radius:50%;}
</stylet>

我项目的下面变成红色的小圆点了。

还有Lees,Sass 的选择器

当项目中使用的 css 扩展语言是 less，需要使用 /deep/ 或者 ::v-deep 深度选择器来修改外用第三方组件的

<style lang="less" scoped>/deep/.el-button{span{color: '#25t'}}.el-button::v-deep{span{color: '#f44'}}
</style>

当项目中使用的 css 扩展语言是 node-sass，需要使用 /deep/ 或者 ::v-deep 深度选择器来修改外用第三方组件的样式

<style lang="scss" scoped>.el-button::v-deep{span{padding:20px;}}/deep/.el-button{span{padding:20px;}}
</style>

总结：

操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用

CSS深度(穿透)选择器相关推荐

css深度选择器deep
1.为什么要有deep 1.当我们给组件设置scoped的时候,此时我们组件的css样式只会对自己的内容生效,不会对子组件里面的内容生效. <style lang="scss" ...
css 深度选择器 ,CSS的coped私有作用域和深度选择器
大家都知道当编译前: .example { color: red; } 编译后: .example[data-v-f3f3eg9] { color: red; } 看完你肯定就会明白了,其实是在你写 ...
【uni-app】深度作用选择器解决修改checkbox样式无效问题
uni-app表单多项选择器需要使用内置组件checkbox,具体使用见官网链接,如下: checkbox - uni-app官网 (dcloud.io) 官方给出h5端的默认样式是这样的: 现在 ...
Vue css样式穿透和权重
普通的html.CSS结构,样式权重为 !important > 行内 > 头部 > 引入.但是在vue里面,我们的文件结构发生改变,不再是html文件而是vue文件,<sty ...
浅析scoped属性原理及深度作用选择器
scoped作用当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素 scoped目标 scoped是为了实现组件的私有化,表示style只属于当前模 ...
css有哪些选择器，优先级如何计算？
这里是修真院前端小课堂,每篇分享文从八个方面深度解析前端知识/技能,本篇分享的是: [css有哪些选择器,优先级如何计算?] 开场语: 大家好,我是IT修真院上海分院第10期的学员林璇,一枚正直纯洁 ...
CSS样式----标记选择器
一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...
可以对同一个html元素定义不同的样式,CSS的多种选择器的使用.ppt
什么是样式选择器是样式选择器当定义一条样式规则时必须指定受这条样式规则作用的网页元素在一条规则中定义的网页元素就是选择器也就是选择该样式规则作用于的网页元素选择器有标签就用选择器选择符就是赋予内部或外 ...
CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

CSS深度(穿透)选择器

还有Lees,Sass 的选择器

CSS深度(穿透)选择器相关推荐

最新文章

热门文章