css深度选择器deep

这篇具有很好参考价值的文章主要介绍了css深度选择器deep。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.为什么要有deep

  • 1.当我们给组件设置scoped的时候,此时我们组件的css样式只会对自己的内容生效,不会对子组件里面的内容生效。

 文章来源地址https://www.toymoban.com/news/detail-400503.html

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .el-card {
    width: 420px;
    /* 这个选择器不生效 */
    .el-card__header {
      height: 80px;
      background: rgba(114, 124, 245, 1);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
    }
  }
  .el-form {
    padding: 0 20px;
  }
  .tc {
    text-align: center;
  }
}
</style>

顶部没有效果

css深度选择器deep

 

  • 2.deep作用: 深度选择器(也有少数人叫穿透选择器)

    • 让父组件向下影响到子组件内部的样式

  • 3.deep语法

    • ::v-deep (scss)

    • /deep/ (less)

 .el-card {
    width: 420px;
    /* 深度选择器 */
    ::v-deep .el-card__header {
      height: 80px;
      background: rgba(114, 124, 245, 1);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
    }
  }

css深度选择器deep 

deep使用小结

1.deep作用:让父组件向下影响到子组件内部的样式

2.deep应用场景:如果组件没有设置scoped,则vue就不会加自定义属性。你的css选择器会对当前页面任何元素生效,自然就需要deep了。

(1)父组件使用了scoped

(2)在父组件中想要修改子组件内部的样式 (注意不是子组件自己哈,而是子组件内部的样式(子组件的子组件)。因为子组件就在父组件里面是可以修改的。 )

 

到了这里,关于css深度选择器deep的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 97-TCP为什么要有一个“TIME_WAIT“的状态

    \\\"TIME_WAIT\\\"状态存在的原因主要有两点: 假设上图中用于确认服务器结束报文段6的TCP报文段7丢失,那么服务器将重发结束报文段,因此客户端需要停留在某个状态以处理重复收到的结束报文段.否则客户端将以复位报文段来回应服务器,服务器则认为这是一个错误,因为他期望的是一

    2024年02月01日
    浏览(58)
  • 为什么MCS-51 单片机总线和端口要有匹配的驱动电路?

            MCS-51系列单片机是一种广泛使用的8位微控制器,它通常用在嵌入式系统中。单片机的总线和端口可能需要额外的驱动电路,这取决于外部设备的电气特性和所需的电流能力。下面将从以下几个方面分析为什么驱动电路这么重要:          电流驱动能力: MCS-51单片机

    2024年02月20日
    浏览(53)
  • 【Linux(0)】为什么要学习Linux,为什么互联网公司在招聘时,会提出要有Linux经验,及其使用;一些Linux常见指令

    💓作者简介: 加油,旭杏,目前大二,正在学习 C++ , 数据结构 等👀 💓作者主页:加油,旭杏的主页👀 ⏩本文收录在:再识C进阶的专栏👀 🚚代码仓库:旭日东升 1👀 🌹欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖        在学习完C语言后,紧接着,我们要来 学习Li

    2024年02月05日
    浏览(59)
  • 【C/C++】详解程序环境和预处理(什么是程序环境?为什么要有程序环境?如何理解程序环境?)

    目录 一、前言 二、 什么是程序环境? 三、 为什么要有程序环境? 四、如何理解程序环境? 🍎 ANSI C 标准  🍐 翻译环境和执行环境  五、详解翻译环境和执行环境  🍇翻译环境(重点!!)  💦编译环境(预处理---编译---汇编)  💦链接环境(链接)  🍉执行环境

    2024年02月21日
    浏览(58)
  • css深度选择器deep

    1.为什么要有deep 1.当我们给组件设置scoped的时候,此时我们组件的css样式只会对自己的内容生效,不会对子组件里面的内容生效。   顶部没有效果   2.deep作用: 深度选择器(也有少数人叫穿透选择器) 让父组件向下影响到 子组件内部的样式 3.deep语法 ::v-deep (scss) /deep/ (le

    2023年04月08日
    浏览(56)
  • css深度选择器 /deep/

    一、/deep/的含义和使用 /deep/  是一种 CSS 深度选择器,也被称为深度组合器或者阴影穿透组合器,主要用在 Web 组件样式封装中。 在 Vue.js 或者 Angular 中,使用了样式封装技术使得组件的样式不会影响到全局,也就是说组件内部的样式默认情况下只对组件内部的元素生效,不

    2024年01月20日
    浏览(73)
  • 我们为什么需要分布式系统?

    简单来说,分布式系统的出现,主要是为了解决单体系统的不足。 分布式系统解决了单机性能瓶颈导致的成本问题。由于摩尔定律失效,廉价PC机的性能瓶颈无法继续突破,虽然小型机和大型机能够实现更高的单机性能,但是成本太高。 分布式系统解决了用户量和数据量爆炸

    2023年04月11日
    浏览(72)
  • 为什么我们需要去中心化存储?

    为什么我们需要去中心化存储? 我们的社会正处于前所未有的信息大爆炸时代,未来将是数据成为主要生产要素的数字时代,而 Web3 也不外乎于此,作为数据解决方案——去中心化存储,不仅是区块链技术的三大支柱(计算、存储、网络)之一,也是 Web3 领域最早出现也最受

    2024年02月02日
    浏览(84)
  • 我们为什么需要API管理系统?

    我们为什么需要API管理系统? 随着web技术的发展,前后端分离成为越来越多互联网公司构建应用的方式。前后端分离的优势是一套Api可被多个客户端复用,分工和协作被细化,大大提高了编码效率,但同时也带来一些“副作用”: 接口文档不可靠。很多小伙伴管理接口文档,

    2024年02月12日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包