首页 前端知识 CSS 根据子元素选择父元素,并设置父元素的样式

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

2024-06-16 09:06:44 前端知识 前端哥 311 636 我要收藏

场景举例:当子元素有增加了一个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类时,父元素的样式发生了改变

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12319.html
标签
评论
发布的文章

json文件的格式转换

2024-06-21 09:06:48

JSON 现代数据交换的利器

2024-06-21 09:06:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!