css通过子元素选择父元素

news2024/12/28 20:00:04

伪类: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;
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

爆肝整理,Postman接口测试-全局变量/接口关联/加密/解密(超细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 全局变量和环境变…

随手记——前端安全策略 Content-Security-Policy – CSP

随手记——前端安全策略 Content-Security-Policy – CSP 一、问题 1. 问题&#xff1a;前端meta标签中配置了CSP安全策略&#xff0c;导致使用第三方地图插件的时间报错不展示 2. 原安全配置&#xff1a; <meta http-equiv"Content-Security-Policy" content&…

STM32MP157驱动开发——按键驱动(查询方式)

文章目录 概述APP 读取按键的 4 种方法查询方式休眠-唤醒方式poll 方式异步通知方式 查询方式的按键驱动程序&#xff08;框架&#xff09;按键驱动编写思路board_xxx.cbutton_drv.cbutton_drv.hbutton_test.cMakefile编译测试 查询方式的按键驱动程序(stm32mp157)board_stm32m…

常见Redis使用问题

一 lettuce使用问题 1 问题描述 Redis Cluster集群&#xff0c;当master宕机&#xff0c;主从切换&#xff0c;客户端报错 timed out 2 原因 SpringBoot2.X版本开始Redis默认的连接池都是采用的Lettuce。当节点发生改变后&#xff0c;Letture默认是不会刷新节点拓扑的。 3…

Spring+SpringMvc+Mybatis整合小Demo

原始方式整合SSM 不使用spring-mybatis包 项目内容 整合ssm完成对account表新增和查询的操作 项目大体结构 创建mavenWeb项目 pom文件中引入依赖 spring核心、aspectj(aop)、spring-jdbc(jdbcTemplate)、spring-tx(事务)、 数据源&#xff1a;mysql、c3p0、mybatis my…

linux之Ubuntu系列 find 、 ln 、 tar、apt-get 指令 软链接和硬链接

查找文件 find 命令 功能非常强大&#xff0c;通常用来在 特定的目录下 搜索 符合条件的文件 find [path] -name “.txt” 记得要加 “ ” 支持通配符 &#xff0c;正则表达式 包括子目录 ls 不包括 子目录 如果省略路径&#xff0c;表示 在当前路径下&#xff0c;搜索 软链接…

测试老鸟总结,性能测试-最佳并发和最大并发,性能测试实施...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能测试&#xf…

无涯教程-Javascript - Switch语句

从JavaScript 1.2开始&#xff0c;您可以使用 switch 语句来处理这种情况&#xff0c;它比重复的 if ... else if 语句更有效。 流程图 以下流程图说明了switch-case语句的工作原理。 switch 语句的目的是给出一个要求值的表达式&#xff0c;并根据表达式的值执行多个不同的语…

云曦暑期学习第一周——sql注入

1浅谈sql注入 1.1sql注入 sql注入是指web应用程序对用户输入数据的合法性没有判断&#xff0c;前端传入后端的参数是攻击者可控的&#xff0c;并且参数带入数据库查询&#xff0c;攻击者可以通过构造不同的sql语句来实现对数据库的任意操作 1.2原理 条件&#xff1a; 1.参…

接入端口与中继端口

交换机端口是支持 IT 的基本组件&#xff0c;可实现网络通信。这些有线硬件设备负责连接并允许在不同设备和连接到其端口的网络部分之间进行数据传输。由于网络管理员在确保网络连接和可用性方面发挥着关键作用&#xff0c;因此网络管理员必须清楚地了解、映射和查看其网络交换…

面向对象Java基础

前言 看大话设计模式的时候&#xff0c;发现自己的基础不是很扎实&#xff0c;重新回顾一些存在有点点不确定的内容&#xff0c;并从书中截取下来&#xff0c;做成笔记快速复习。 1、字段和属性 字段&#xff1a;用private修饰&#xff0c;也叫私有变量。属性&#xff1a;字…

2.Docker操作

文章目录 Docker操作Docker镜像操作搜索镜像获取镜像镜像加速下载查看镜像详细信息为镜像添加标签删除镜像导出导入镜像上传镜像 Docker容器操作创建容器查看容器状态启动容器创建并启动容器进入容器停止容器删除容器复制容器文件到宿主机容器的导出导入 Docker操作 ###查看do…

【天工Godwork精品教程】天工3.1.7安装教程(附Godwork完整版下载地址)

本文讲解天工3.1.7安装过程(附Godwork完整版网盘下载地址)。 文章目录 一、天工3.1.7安装教程1. 安装GodWork-AT 3.1.72. 安装GodWork-AT 3.1.7补丁3. 安装GodWork-EOS-Setup-2017B-12314. 安装GodWork-EOS补丁5. 运行godwokr软件6. 生成ZC码7. 输入ZC码8. eos插件调用二、天…

AtcoderABC245场

A - Good morningA - Good morning 题目大意 给定Takahashi和Aoki的起床时间&#xff0c;判断谁先起床。 思路分析 题目要求比较Takahashi和Aoki的起床时间。首先&#xff0c;将起床时间转换为以分钟为单位。然后&#xff0c;通过比较两者的起床时间来确定谁先起床。 时间复…

文献阅读笔记——求解车辆路径问题及其变体的元启发式算法的分类综述

论文题目&#xff1a;A taxonomic review of metaheuristic algorithms for solving the vehicle routing problem and its variants 其他信息&#xff1a;Computers & Industrial Engineering|2020|Raafat Elshaer⁎, Hadeer Awad 文章贡献&#xff1a;1&#xff09;对使…

RabbitMQ安装及简单使用

说明&#xff1a;RabbitMQ&#xff08;官网&#xff1a;&#xff09;是一门异步通讯技术&#xff0c;使用异步通讯技术&#xff0c;可解决同步通讯的一些问题。 安装 本文介绍在云服务器上安装RabbitMQ&#xff0c;操作系统是CentOS 7&#xff0c;远程连接工具是WindTerm&…

抖音seo源码部署/开源不加密可二开/抖音seo优化开发方案

一、前言 抖音是目前国内非常流行的短视频平台之一&#xff0c;用户数量庞大&#xff0c;更是吸引了许多企业和个人在上面开设账号&#xff0c;通过发布内容来进行流量变现。但是&#xff0c;在一个账号发布内容的同时&#xff0c;管理员又需要同时关注多个账号&#xff0c;对账…

C语言--程序环境和预处理

翻译环境 C语言的代码是文本信息&#xff0c;对于计算机来说无法直接理解&#xff0c;需要通过翻译环境进行翻译成二进制信息&#xff1b; 我们在写代码的时候&#xff0c;一般都会写在一个源文件中&#xff0c;这时候我们就使用我们的编译器(VS)将其转换为机器代码&#xff0…

汉诺塔问题(Hanoi Tower)--递归典型问题--Java版(图文详解)

目录 概述问题来源汉诺塔问题的规则 实现解题思路一个盘子两个盘子三个盘子n个盘子 递归概念递归特性递归的时间复杂度汉诺塔中的递归 代码 总结 概述 问题来源 汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智…

2023无监督摘要顶会论文合集

2023无监督摘要顶会论文合集 写在最前面ACL-2023Aspect-aware Unsupervised Extractive Opinion Summarization 面向的无监督意见摘要&#xff08;没找到&#xff09;Unsupervised Extractive Summarization of Emotion Triggers *情绪触发(原因)的 *无监督 *抽取式 摘要&#…