CSS 根据子元素选择父元素，并设置父元素的样式_css如何设置当前元素的父级的样式

作者：小小林熬夜学编程 | 2024-05-19 13:53:08

踩

css如何设置当前元素的父级的样式

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/593164