CSS 根据子元素选择父元素,并设置父元素的样式

探索HTML中的元素关系:父元素、子元素、祖先元素与后代元素 阅读详情
AI摘要

文章介绍了如何在CSS中使用`:has`伪类,当子元素添加特定class时,自动改变父元素的样式,展示了具体的代码示例。

场景举例:当子元素有增加了一个class时,需要影响其父元素的样式

可以使用":has"伪类来实现选择父元素的效果

<style>
    .parent:has(.child){
        background-color: #eee;
    }
	p{
		width:100px;
		border:1px solid #000;
	}
</style>
<body>
<div class="parent">
    <p class="">测试效果</p>
</div>
</body>

<style>
    .parent:has(.child){
        background-color: #eee;
    }
	p{
		width:100px;
		border:1px solid #000;
	}
</style>
<body>
<div class="parent">
    <p class="child">测试效果</p>
</div>
</body>

可以看到,当p元素拥有child类时,父元素的样式发生了改变

css笔记 传送门 一、CSS 介绍 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式(美化网页)。 CSS 早已被所有主流浏览器采用,它允许你轻松控制以下样式: 颜色 color 背景 background 字体 font 位置 position 显示 display 边框 border 内边距 padding 外边距 margin 行高 line-height 装饰 text-decoration 过渡 transtion 变化 transform 动画 an 阅读详情

相关推荐

CSS之选择器、优先级、继承

visibility:元素的可见性(注意:即使父元素设置为visibility: hidden,子元素依然可以通过设置visibility: visible来显示自己)。border:边框设置(包含border-width、border-style、border-color等)。display:元素的显示类型(例如block,inline,flex)。:用于定义元素获得焦点时(如通过tab键选中)的样式,常用于表单控件。:用于选中的单选按钮(radio)或复选框(checkbox)的样式。

dachaoxuexi的博客 2062

css通过子元素选择父元素

如:elementui的table的type="expand"表格展开行。点击展开后td标签有padding。但td标签和包裹他的tr标签都是点击后产生的。无法在外层包裹div,直接用::v-deep会改变包裹他的表格的样式。个别UI框架个别标签通过事件直接生成或者无法选中的情况。直接使用::v-deep会导致全部标签改变,包裹标签使用class名::v-deep无法选中父元素改变父元素属性的情况。所以可以使用伪类:has来改变td标签的padding。伪类:has选择父元素。

progrmmmm的博客 1万+

css子元素相对父元素进行定位的实现

解决方案

css子元素选择父元素的实现

css元素不能往前选择,即不能选择父元素或前兄弟元素;这都受制于DOM渲染规则;而这里我们使用别的方法来实现前元素或父元素选择的效果;有改变dom的排版位置,:focus-within伪类的选择;

一个小白的成长历程 2万+

京东联盟API实战:5分钟搞定商品返利链接生成(附Python代码)

本文详细介绍了如何利用京东联盟API快速构建自动化商品返利链接生成系统。通过Python代码实战,从API申请、环境配置到核心功能封装,手把手教你实现批量商品信息查询与推广链接生成,帮助内容创作者和开发者大幅提升电商推广效率。

weixin_29216957的博客 674

Visionpro 使用CogPMAlignTool工具提取匹配轮廓点

【代码】Visionpro 使用CogPMAlignTool工具提取匹配轮廓点。

weixin_43947315的博客 2093

整理一个非常强大的 CSS 选择器:has()

你有没有想过使用CSS选择器来检查父元素中是否存在特定的元素?例如,如果一个卡片组件中有图片,就给它添加一个。这以前在CSS中是无法实现的,而全新的 CSS 选择器:has就可以帮助我们选择包含特定元素的父元素。下面来看看这个全新的 CSS 选择器吧!在CSS中,我们无法根据元素中是否存在特定的元素来设置父元素的样式,要想实现这一点,就必须创建CSS类,并根据需要进行类的切换。来看下面的例子:这里有两种卡片:包含图片和不包含图片。/* 有图片的卡片 */.card {gap: 1rem;

前端梦工厂 1156

Elsevier期刊LaTeX双栏模板(cas-dc)实战:从Overleaf配置到投稿全流程

本文详细介绍了Elsevier期刊LaTeX双栏模板(cas-dc)在Overleaf平台上的配置与使用全流程,包括模板结构解析、标题与作者信息规范、摘要与关键词特殊格式、正文写作技巧、参考文献管理以及投稿前检查清单。特别针对Elsevier期刊投稿需求,提供了从模板安装到最终投稿的实用指南,帮助研究者高效完成论文排版工作。

weixin_28455801的博客 1323

CSS的进阶

今天是css的第二天,分享一下,每天都有一些小进步,这就是坚持下去的意义,别听别人怎么说,要知道,想永远都是问题,行动起来才会有答案。

weixin_45229261的博客 152

高通引导文件获取全攻略:ELF/MBN提取与EDL救砖实战

在智能手机底层维护中,引导加载程序(Bootloader)是系统启动的第一道关卡。高通平台通过PBL、SBL1/XBL等阶段完成硬件初始化和安全校验,一旦引导分区损坏,设备便可能陷入黑砖状态。此时,掌握ELF与MBN格式的引导镜像获取方法,成为维修工程师和刷机用户的核心技能。通过官方固件包解包或借助EDL模式直接从设备分区备份,均能获得原厂匹配的引导文件。配合Firehose工具和9008端口通信,即可实现分区级读写与救砖恢复。本文从启动链路原理出发,对比两种获取路径的适用场景,并针对驱动识别、文件校验、分

weixin_30175731的博客 422

Oracle EBS Interface/API(43) -自定义AP发票状态说明API

在某项目,客户需求获得AP发票的状态说明,例如对账系统或者某些报表。由于标准系统未提供状态说明,需要通过AP发票的标准Form获得相关业务逻辑,然后自定义AP发票状态说明API。

陈显平的专栏-Oracle EBS 606

html获取子节点数量,CSS能检测出元素的子元素数量吗?

澄清:由于原来问题的措辞,一些市民担心这个答案可能会误导市民。注意,在CSS 3中,样式不能应用于父节点根据它有多少孩子。然而,风格能,会,可以的数目应用于子节点。兄弟姐妹他们有。原文:令人难以置信的是,现在完全可以在CSS 3中实现这一点。/*oneitem*/li:first-child:nth-last-child(1){/*-or-li:only-child{*/width...

weixin_28968525的博客 846

3.详解Labview串口通讯--从串口线连接到串口通讯保姆级教程

本文非常详细的介绍了使用Labview实现串口通讯,读完题主这篇文章,即使你是今天刚下载的Labview,也能熟练的连接并驱动串口执行,接下来和我一起学习下,记得关注并点赞不迷路

关注我,更多技术问题欢迎私聊~ 1万+

ruorbb自用|前端学习8——CSS三大特性

第三天

weixin_45976685的博客 190

OpenGL 进阶系列10 - 光线跟踪实现简介(Ray Tracing)

OpenGL 实现光线跟踪(Ray Tracing)是一个相对复杂但有趣的挑战,通常用于生成高度逼真的图像效果,如反射、折射、阴影等。OpenGL 本身并不是为光线跟踪设计的,但可以通过结合计算着色器和现代 OpenGL 功能实现光线跟踪。光线跟踪的基本思路是从相机(或视点)出发,发射光线并计算这些光线与场景中物体的交点。光线与场景中物体相交的计算。计算交点的光照(基于表面法线、光源位置、材质等)。反射和折射的处理(如果物体是透明或反射的)。

GPU全栈博主 1534

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

CSS学习笔记03——CSS布局·盒子模型

CSS三大特性 标题 PxCook的基本使用 盒子模型

visionchyw的博客 312

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

CSS学习笔记5CSS的三大特性与盒子模型

CSS的三大特性 CSS有三个非常重要的特性:层叠性、继承性、优先级。 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一种冲突的样式。层叠性主要是解决样式冲突的问题 层叠性原则: 样式冲突,遵循的原则就是就近原则,哪个样式离结构近,就执行哪个样式 样式不冲突,不会层叠 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS层叠性</tit

qwq_666的博客 286

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

CSS子元素选择父元素

通常一个CSS选择器都是从上往下选择的,通过父元素选择子元素,那么能不能通过子元素选择父元素呢? &lt;ul&gt; &lt;li&gt; &lt;a href="#" class="active"&gt;1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=&quo

宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒 10万+

CSS—内联样式(行内样式)、内部样式、外部样式、选择器

文章目录CSS简介使用CSS修改元素样式方式方式一(==内联样式或行内样式==)方式二(==内部样式表==)方式三(==外部样式表==)全场最佳语法选择器元素选择器id选择器(id不能重复,即使出现相同效果)类选择器(class:与id作用相似,但是可重复)通配选择器交集选择器并集选择器(选择器分组)关系选择器子元素选择器后代元素选择器兄弟选择器属性选择器伪类选择器声明块 网页分为: 结构(html) 表现(CSS) 行为(JavaScript) CSS 简介 层叠样式表 网页实际时一个多层的结构,通过C

Natural_mengniu的博客 2万+

如何通过CSS选择器选择一个元素的子元素

随着CSS3的引入,我们有了更多强大而灵活的选择器来精确控制页面上的元素样式。本篇文章将深入探讨如何利用CSS选择器来选定特定的子元素,并展示一些实际应用场景,以帮助你在项目中更高效地运用这些知识。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。有时候我们需要针对特定类别的子元素应用样式,这时我们可以结合类选择器来进一步细化我们的目标。这个选择器仅匹配那些直接由前面指定的元素所包含的子元素,而不包括更深层次的后代元素。专栏系列(点击解锁)

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 3564

css 如何根据子元素给他的父元素设置样式

'active' : 'unactive' }">子元素啊根据一个变量来加样式</div>其中能马上想到的就是:这个class的判断可以加在parent后面,但是如果不改变外层内容只是修改css呢。这个时候如何根据子元素来给这个parent加样式呢?这个时候我们可以用到:has。

肖肖肖丽珠的博客 1875

CSS选择器(元素+class+id+后代+子元素+相邻+属性+选择器分组)

元素选择器( p{ ...; ...;}) 对已选中的HTML元素符号设置CSS样式 div、 p、 a 、ul 、li等 基本格式: div { height:80px; width:80px; } 1.div: 元素符号 2.width、height : 属性 3.80px : 属性值 class选择器( .Name { ...; ...;} )...

北溟南风起 2万+

html选择器 父元素,CSS子元素选择父元素

CSS子元素选择父元素发布时间:2018-10-09 23:21,浏览次数:6139, 标签:CSS通常一个CSS选择器都是从上往下选择的,通过父元素选择子元素,那么能不能通过子元素选择父元素呢? 1 2 如果我想选择包含 a.active 的 li 该怎么实现呢? 目前我们学到的CSS好像是没有办法的,不过今天要将的一个CSS伪类 :has()就有这个功能,虽然还处于草案阶段,但是还是可以...

weixin_39929721的博客 1664

判断HTML是否有子节点,css判断某元素的子元素个数,并分别设置样式

工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。demo如下: 效果图如下 完整代码如下:css3*{box-sizing:border-box;}ul{width:100%;margin:0;padding:0;font-size: 0;}li{margin:0...

weixin_42297982的博客 2740

CSS根据子元素个数不同定义样式

  近日面试,遇见了一个这样的问题,不会,便记下来。   问题:如何根据子元素个数的不同定义不同的样式?   代码:HTML <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> ...

dbjy54701的博客 727
上一篇: No development certificate found. Generate a new certificate manually, or set the `canGenerateNewCer
下一篇: layui table 重新设置表格的高度
easonjake
博客等级 码龄10年 30粉丝 28原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值