css 深度选择器(穿透选择器)

2023-11-07

什么情况下使用样式穿透


引入第三方组件库(如element-ui、element-plus),修改第三方组件库的样式样式文件中使用了 scoped 属性,但是为了每个组件之间不相互影响所以不能去除scoped 属性,此时需要用样式穿透选择器来修改第三方组件的样式,以下罗列了三种方法



1.>>>


适用与 css、stylus,不太推荐,可能会有问题
外层类 /deep/ 想要修改类名 {
修改样式
}

.select-all {
			>>> .uni-checkbox-input {
				margin-right: 5rpx;
			}

2. /deep/


适用于 scss、less
外层类 >>> 想要修改类名 {
修改样式
}

.select-all {
			/deep/ .uni-checkbox-input {
				margin-right: 5rpx;
			}

3. ::v-deep

通用,最好用的一个
::deep 想要修改类名 {
修改样式
}

::v-deep uni-swiper .uni-swiper-dots-horizontal {
	 bottom: 30rpx !important;
	}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 深度选择器(穿透选择器) 的相关文章

  • Sass 负变量值?

    我有几个 scss 选择器 其中我使用相同数量的正数和负数 如下所示 padding 0 15px 15px margin 0 15px 20px 15px 我更喜欢对所有 15px 量使用一个变量 但这不起作用 pad 15px padd
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • Bootstrap 4alpha - 更改手机/桌面/平板电脑的徽标

    我有一个使用 bootstrap 4 alpha 的标头 div class container div class row div class col md 6 text md left text center div class nav
  • 如何重置弹性项目的“显示”属性

    我试图通过保留旧浏览器 特别是 IE8 IE9 和 Opera 10 的表格 将基于表格和 JS 的旧布局转换为具有向后兼容性的新 Flexbox 问题是没有display flex item覆盖旧样式display table cell
  • 缩小 HTML、CSS 和 Javascript 是一个坏主意吗?

    维基百科定义缩小 http en wikipedia org wiki Minification 28programming 29 as 从源代码中删除所有不必要的字符而不改变其功能的过程 这些不必要的字符通常包括空格字符 换行符 注释 有
  • 使用渐变填充而不是普通颜色创建标记 - Google 地图

    我正在尝试使用 Google 地图获得一个点状标记google maps SymbolPath CIRCLE 我在其中取得了成功 var dotMarkerImage path google maps SymbolPath CIRCLE f
  • 是否可以使用“grid-template-areas”删除网格中空行的高度?

    我有一个包含八张 或更少 卡片的网格 我希望卡片自动放置在网格中 而不知道它们的宽度和高度 也就是说 宽度和高度应该在网格样式中指定 当我展示全部 8 张卡片时效果非常好 例子 grid template areas card 1 card
  • Bootstrap 的网格每行列数

    Bootstrap 附带一个 12 列网格系统 必须放置在行内 我的问题是 列数 行数是否必须为 12 或更少 或者我可以有如下所示的布局吗 div class row div class col md 4 div div class co
  • CSS 中的分层图像 - 可以将 2 个图像放在同一个元素中吗?

    假设我在 CSS 中为网页设置背景图像 如下所示 body font size 62 5 Resets 1em to 10px font family Verdana Arial Sans Serif background color 9D
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • 保证金如何运作?

    我在下面提供了marginfix这是一个块级元素并且one and two也是块级的 但它们是浮动的 这就是为什么它们位于同一行布局的原因 但是marginfix也不浮动 块级元素应位于该元素下方 如下所示
  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba
  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl

随机推荐