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

最新推荐文章于 2024-05-23 12:52:35 发布

easonjake

最新推荐文章于 2024-05-23 12:52:35 发布

阅读量1.9k

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/easonjake/article/details/138917473

版权

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

easonjake

关注关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 根据子元素选择父元素，并设置父元素的样式

场景举例：当子元素有增加了一个class时，需要影响其父元素的样式。可以看到，当p元素拥有child类时，父元素的样式发生了改变。可以使用":has"伪类来实现选择父元素的效果。
复制链接

扫一扫