css深度选择器 /deep/

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

css深度选择器,CSS学习,css,前端,javascript

一、/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 不支持 >>>。所以需要根据你的实际开发环境来选择合适的深度选择器

场景使用

css深度选择器,CSS学习,css,前端,javascript

我想给这一块加一个滚动条,通过overflow-y属性可以实现,需要给div一个高度

css深度选择器,CSS学习,css,前端,javascript

理论上这段代码是可以作用与这个div,但是没有起作用,加上/deep/就可以了文章来源地址https://www.toymoban.com/news/detail-808323.html

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

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

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

相关文章

  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(45)
  • 『 前端三剑客 』:CSS选择器

    上一篇文章我们介绍了 html 的常用标签及用法 , 这次我们来介绍 css 来对页面进行美化处理 css 全称 : 层叠样式表 (Cascading Style Sheets). 主要作用 : 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面 的效果. 能够做到 页面的样式和结构分离 . 一 . 基本语法 基本语

    2024年02月09日
    浏览(40)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(72)
  • 【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

    欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。 CSS,即层叠样式表(Cascading Style Sheets),是一种用于控制网

    2024年02月12日
    浏览(55)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(59)
  • 前端面试题-(浏览器内核,CSS选择器优先级,盒子模型,CSS硬件加速,CSS扩展)

    内核 描述 Trident(IE内核) 主要用在window系统中的IE浏览器中,由微软研发并投入使用 Gecko(Firefox内核) 主要用于Firefox浏览器中,特点是代码完全公开,开发程度高 Webkit(Safari内核) 苹果产品中的safari浏览器使用的就是webkit内核,其特点是不受ie,firefox等内核的约束,比较安全。

    2024年01月25日
    浏览(67)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(41)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(54)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(57)
  • 前端成神之路-CSS(选择器、背景、特性)

    目录 前端成神之路-CSS(选择器、背景、特性) CSS 第二天 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. 标签显示模式(display)重点 2.1 什么是标签显示模式 2.2 块级

    2024年02月08日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包