2024年物联网嵌入式最全css deep深度作用选择器_css deep,2024年最新阿里物联网嵌入式开发开发面试解答

img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上物联网嵌入式知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新

如果你需要这些资料,可以戳这里获取

原理

在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个【data-v-hash】属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素。

例子

值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被加上当前组件的hash值,又会加上父级组件的hash值

若父组件样式添加scoped,父组件的所有标签则添加hash:

<div data-v-b45036b2></div>

各自带有自己组件的hash,子组件除了有自己的hash之外,还带上了父组件的hash,子组件最外层标签:

 <div data-v-b45036b2 data-v-384b136e ></div>

以下是父组件的节点:

<div class="wrap">
    <child></child>
</div>

以下是child子组件的节点:

<template>
  <div>
    <span class="child">test</span>
  </div>
</template>

父组件CSS:

<style scoped>
    .wrap .child {
      color: red;
    }
</style>

以上css代码编译之后为:

.wrap .child[data-v-b45036b2] {color: red;}

可见,编译之后的css中,子组件对应节点的css带上的是父组件的hash,hash值对应不上,所以控制不到子组件的样式

难道父组件写上scoped,就没办法控制子组件(非根结点)的样式了吗,那么以上问题要如何解决呢

1.混用本地和全局样式

可以在一个组件中同时使用有作用域和无作用域的样式,把要控制子组件样式的代码写在全局中:

<style>
    / * 全局样式 */
    .wrap .child {
          color: red;
    }
</style>

<style scoped>
    /* 本地样式 */

</style>

这种形式比较累赘,不够优雅,有没有办法可以在本地样式中控制子组件的样式呢

2. >>> 深度作用选择器**(注意,只作用于css)**

父组件的CSS用以下写法:

<style scoped>
    .wrap >>> .child {
      color: red;


![img](https://img-blog.csdnimg.cn/img_convert/2acb7cd9e00b1f8d32778adfba3135f4.png)
![img](https://img-blog.csdnimg.cn/img_convert/67989c3a3d65f2a70479641043c7369f.png)

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上物联网嵌入式知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新**

**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

*由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新**

**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值