企业门户网站 意义,网站被k了怎么做,设计师的招聘要求,外贸免费建设网站一、/deep/的含义和使用
/deep/ 是一种 CSS 深度选择器#xff0c;也被称为深度组合器或者阴影穿透组合器#xff0c;主要用在 Web 组件样式封装中。
在 Vue.js 或者 Angular 中#xff0c;使用了样式封装技术使得组件的样式不会影响到全局#xff0c;也就是说组件内部的…
一、/deep/的含义和使用
/deep/ 是一种 CSS 深度选择器也被称为深度组合器或者阴影穿透组合器主要用在 Web 组件样式封装中。
在 Vue.js 或者 Angular 中使用了样式封装技术使得组件的样式不会影响到全局也就是说组件内部的样式默认情况下只对组件内部的元素生效不会影响到组件外部的元素。
但是有时候我们需要改变组件内部元素的样式这时候就需要使用 /deep/::v-deep 这样的深度选择器它们可以使得我们定义的样式穿透组件的样式封装边界作用到组件内部的元素。
上面那段 CSS 代码中/deep/ #js-nodes .el-tabs__content 表示选择 id 为 js-nodes 的元素下所有的 class 为 el-tabs__content 的元素而且这个选择器可以穿透组件边界作用到子组件内部的元素。
注意
/deep/ 在一些浏览器和 CSS 预处理器中已经被废弃取而代之的是 ::v-deep 和 你可能需要根据你的开发环境来选择合适的深度选择器不同的 CSS 预处理器对这两种深度选择器的支持可能会有所不同例如如果你使用的是 Sass那么你只能使用 ::v-deep因为 Sass 不支持 。所以需要根据你的实际开发环境来选择合适的深度选择器
场景使用 我想给这一块加一个滚动条通过overflow-y属性可以实现需要给div一个高度 理论上这段代码是可以作用与这个div但是没有起作用加上/deep/就可以了
