css通过子元素选择父元素

伪类:has选择父元素

td:has(> .unfoldTable){
  //可选中所有td下包含unfoldTable的class标签的td属性
  color: red;
}

td:has(> div){
  //可选中所有td下包含div标签的td属性
  color: red;
}

特殊举例分析:

个别UI框架个别标签通过事件直接生成或者无法选中的情况。直接使用::v-deep会导致全部标签改变,包裹标签使用class名::v-deep无法选中父元素改变父元素属性的情况。

如:elementui的table的type="expand"表格展开行。点击展开后td标签有padding。但td标签和包裹他的tr标签都是点击后产生的。无法在外层包裹div,直接用::v-deep会改变包裹他的表格的样式。

所以可以使用伪类:has来改变td标签的padding。

部分代码:

//标签
<el-table-column type="expand">
          <template slot-scope="scope">
            <div class="unfoldTable">
              <el-table
              :show-header="false"
              :data="statusDetail">
                <el-table-column label="序号" width="80" align="center" />
                <el-table-column width="40"></el-table-column>


//样式
::v-deep td:has(> .unfoldTable){
  //需要额外加入穿透和!important
  padding: 0px !important;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/41339.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringAMQP使用

说明&#xff1a;SpringAMQP&#xff08;官网&#xff1a;https://spring.io/projects/spring-amqp&#xff09;是基于RabbitMQ封装的一套模板&#xff0c;并利用了SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。安装和原始使用参考&#xff1a;http://t.csdn.cn…

SpringCloud(五)Gateway 路由网关

一、路由网关 官网地址&#xff1a;https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/ 我们需要连接互联网&#xff0c;那么就需要将手机或是电脑连接到家里的路由器才可以&#xff0c;而路由器则连接光猫&#xff0c;光猫再通过光纤连接到互联网&a…

按键控制led变化

文章目录 按键控制led变化一、简介二、代码三、仿真代码四、仿真结果五、总结 按键控制led变化 一、简介 使用按键控制开发板上一个led灯的亮灭&#xff0c;当按键按下的时候led灯就亮&#xff0c;当再一次按下按键的时候led就不亮了。由于按键存在抖动&#xff0c;按键松开的…

idea 有时提示找不到类或者符号,日志报java: 找不到符号的解决

解决一&#xff1a; idea maven编译成功&#xff0c;运行失败提示找不到符号&#xff0c;主要是get和set方法找不到符号&#xff0c;此时就是idea的lombok版本冲突 IDEA版本导致的Lombok失效&#xff0c;需要更新lombok版本到1.18.14及之后版本得到解决 <dependency>&…

Linux:squid透明代理

在传统代理上进行修改并添加网卡 这次不使用手动代理&#xff0c;而是把网关搞成代理 在下面这个链接里的文章实验下进行修改 Linux&#xff1a;squid传统代理_鲍海超-GNUBHCkalitarro的博客-CSDN博客 完成以后不用再win10上去配置&#xff0c;代理的那一步&#xff0c;然后…

3、Java入门教程【数据类型】

一、概述 java中数据类型分为两大类&#xff1a;【基本数据类型】和【引用数据类型】 二、基础数据类型 数据类型含义默认值取值范围存储大小&#xff08;字节&#xff09;整型byte字节型0-128 到 1271整型short短整型0-2^15 到 2^15-12整型int【默认】整形0-2^31 到 2^31-14…

1186. 删除一次得到子数组最大和;1711. 大餐计数;1834. 单线程 CPU

1186. 删除一次得到子数组最大和 解题思路&#xff1a;如果没做过还不是很好想&#xff0c;当时自己第一反应是双指针&#xff0c;结果是个动态规划的题。 核心就是dp的定义&#xff0c;dp[i][k]表示以arr[i]结尾删除k次的最大和。看到这里其实就有一点思路了 dp[i][0]表示以…

⛳ Git安装与配置

Git安装配置目录 ⛳ Git安装与配置&#x1f3ed; 一&#xff0c;git的安装&#x1f3a8; 1&#xff0c;下载git&#x1f463; 2&#xff0c;下载完成之后&#xff0c;双击安装即可。&#x1f4bb; 3&#xff0c;更改安装目录&#xff08;没有中文且没有空格&#xff09;&#x…

Netty核心技术十一--用Netty 自己 实现 dubbo RPC

1. RPC基本介绍 RPC&#xff08;Remote Procedure Call&#xff09;:远程 过程调用&#xff0c;是一个计算机 通信协议。该协议允许运 行于一台计算机的程序调 用另一台计算机的子程序&#xff0c; 而程序员无需额外地为这 个交互作用编程 两个或多个应用程序都分 布在不同的服…

【已解决】html元素如何使字体占据相同的元素显得整齐

本博文源于自身的亲身实践&#xff0c;让html的文本元素对齐&#xff0c;如果不让其对齐就会变得很丑陋&#xff0c;如下图&#xff0c;那么如何设置才能让元素占据相同呢&#xff1f; 文章目录 1、问题来源2、问题解决思路3、问题解决方案4、问题完整源码及效果 1、问题来源 …

摩尔投票算法(Moore‘s Voting Algorithm)及例题

摩尔投票算法&#xff08;Moores Voting Algorithm&#xff09;及例题 摩尔投票算法简介摩尔投票算法算法思想摩尔投票算法经典题目169. 多数元素229. 多数元素 II6927. 合法分割的最小下标 上午打力扣第 354 场周赛最后十五分钟用摩尔投票算法直接秒了第三题。 摩尔投票算法简…

使用原生Redis命令实现分布式锁

推荐文章&#xff1a; 1、springBoot对接kafka,批量、并发、异步获取消息,并动态、批量插入库表; ​ 2、SpringBoot用线程池ThreadPoolTaskExecutor异步处理百万级数据; 3、java后端接口API性能优化技巧 4、SpringBootMyBatis流式查询,处理大规模数据,提高系统的性能和响应…

一零六四、世界杯数据可视化分析(阿里云天池赛)

目录 赛制官方链接 活动背景 活动时间&#xff1a;即日起-12月31日17点 数据说明 世界杯成绩信息表&#xff1a;WorldCupsSummary 世界杯比赛比分汇总表&#xff1a;WorldCupMatches.csv 世界杯球员信息表&#xff1a;WorldCupPlayers.csv 代码实现 赛制官方链接 世界杯…

Git 学习笔记

Git 仓库中的提交记录保存的是你的目录下所有文件的快照&#xff0c;就像是把整个目录复制&#xff0c;然后再粘贴一样&#xff0c;但比复制粘贴优雅许多&#xff01; Git 希望提交记录尽可能地轻量&#xff0c;因此在你每次进行提交时&#xff0c;它并不会盲目地复制整个目录。…

使用typora+PicGo+Gitee简单实现图片上传功能

本文通过配置PicGoGitee来实现typora图片上传功能&#xff0c;系统是window 注意下载的清单有&#xff1a;PicGo&#xff0c;node.js&#xff0c;配置有&#xff1a;PicGo&#xff0c;node.js&#xff0c;gitee&#xff0c;typora 看着复杂实际上并不难&#xff0c;只是繁琐&am…

ADC 的初识

ADC介绍 Q: ADC是什么&#xff1f; A: 全称&#xff1a;Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 ADC的性能指标 量程&#xff1a;能测量的电压范围分辨率&#xff1a;ADC能辨别的最小模拟量&#xff0c;通常以输出二进制数的位数表示&#xff0c;比如&am…

HttpClient使用MultipartEntityBuilder上传文件时乱码问题解决

HttpClient使用MultipartEntityBuilder是常用的上传文件的组件&#xff0c;但是上传的文件名称是乱码&#xff0c;一直输出一堆的问号&#xff1a; 如何解决呢&#xff1f;废话少说&#xff0c;先直接上代码&#xff1a; public static String doPostWithFiles(HttpClient http…

scripy其他

持久化 # 爬回来&#xff0c;解析完了&#xff0c;想存储&#xff0c;有两种方案 ## 方案一&#xff1a;一般不用 parse必须有return值&#xff0c;必须是列表套字典形式--->使用命令&#xff0c;可以保存到json格式中&#xff0c;csv中scrapy crawl cnblogs -o cnbogs.j…

【精华】maven 生命周期 + 依赖传递+ scope【依赖范围】 + 排除依赖 可选依赖

目录 一 . lifecycle 生命周期 二. 依赖 与 依赖传递 三. scope 依赖范围 scope指定依赖范围 依赖传递依赖与原依赖冲突 四 maven的可选依赖与排除依赖 可选依赖 全部 排除依赖 显式的指定 maven官网技术文档&#xff1a; 一 . lifecycle 生命周期 * clean&…

基于appium的常用元素定位方法

目录 一、元素定位工具 1.uiautomatorviewer.bat 2.appium检查器 二、常用元素定位方法 1.id定位 2.class_name定位 3.accessibility_id定位 4.android_uiautomator定位 5.xpath定位 三、组合定位 四、父子定位 五、兄弟定位 总结&#xff1a; 一、元素定位工具 app应…