广告位联系
返回顶部
分享到

css通过子元素选择父元素的实现介绍

css 来源:互联网 作者:佚名 发布时间:2024-02-25 21:45:12 人浏览
摘要

伪类:has选择父元素 1 2 3 4 5 6 7 8 td:has( .unfoldTable){ //可选中所有td下包含unfoldTable的class标签的td属性 color: red; } td:has( div){ //可选中所有td下包含div标签的td属性 color: red; } 特殊举例分析: 个别U

伪类:has选择父元素

1

2

3

4

5

6

7

8

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。

部分代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//标签

<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;

}


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 使用CSS实现多行文本擦除效果的介绍

    使用CSS实现多行文本擦除效果的介绍
    今天来实现一个多行文本擦除的效果,有种经典咏流传节目中表演开始前阅读诗句的一些既视感,在工作中其实也遇到过这样的需求当时是
  • CSS中Position:Sticky不起作用的问题解决
    sticky属性不生效: 检查浏览器兼容性; 检查是否指定了阈值; 检查 Safari 的供应商前缀; 检查祖先元素是否具有overflow属性集; 检查heig
  • css通过子元素选择父元素的实现介绍

    css通过子元素选择父元素的实现介绍
    伪类:has选择父元素 1 2 3 4 5 6 7 8 td:has( .unfoldTable){ //可选中所有td下包含unfoldTable的class标签的td属性 color: red; } td:has( div){ //可选中所有td下包
  • css溢出隐藏的几种方法实现介绍
    当容器中的文本内容超出容器的宽度或高度时,就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。 单行文本溢出省略 单行文
  • flex布局子元素宽度超出父元素问题及解决方案

    flex布局子元素宽度超出父元素问题及解决方案
    1. 第一次遇到这个问题的场景 先看效果图,大家可以看一下下面的样式,很明显左边和右边的盒子我是给的定宽,但是被挤压了 这个是我在
  • css3实现四周线条环绕流动效果

    css3实现四周线条环绕流动效果
    效果: 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
  • css实现边框流动的项目介绍
    要实现一个边框流动的效果,可以使用CSS动画来实现。在HTML中,我们需要创建一个元素(例如div),并将其设置为具有一定宽度和高度的盒
  • CSS中设置文字下划线的几种方法介绍

    CSS中设置文字下划线的几种方法介绍
    一 、CSS种使用 text-decoration 属性来设置文字的装饰效果,包括下划线。 常用的取值: none:默认值,不设置任何装饰效果。 underline:设置文
  • CSS实现文字字体颜色渐变的三种方法介绍
    第一种方法 1 2 3 4 5 6 /*实现文字颜色从红到黄的线性渐变效果*/ .gradient-text { background: linear-gradient(to right, #ff0000, #ffff00); /*设置渐变的方向从
  • CSS实现一个渐变色箭头的代码

    CSS实现一个渐变色箭头的代码
    产品希望在漏斗图的旁边,每一层漏斗边上加上一个渐变色的箭头,效果如下: 实现 网上大部分的箭头实现都是利用一个div来实现箭头躯干
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计