首页 > 代码库 > CSS中模拟父元素选择器
CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器。
至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。
简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了。
HTML:
<div id="box">
<p>pppppppp</p>
<span></span>
</div>
CSS:
div,p{
margin:0;
padding:0;
}
#box{
width:300px;
height:300px;
position:relative;
}
#box>span{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-shadow:0px 0px 0px 1px #ccc;
}
#box>p:hover + span{
box-shadow:0px 0px 0px 1px red;
}
p{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1;
}
效果:
hover的时候
下面说一下注意点
这个span必须放在p标签后一个位置,因为我们用的是+下一个同级选择器。还有就是p标签必须加z-index,不然span会把p标签盖住,效果就没了。
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
这段代码会把p标签垂直居中。
其实这个原理很简单,就是原本给父元素添加的样式给一个子元素添加,让子元素冒充父元素,定位就好了。
CSS中模拟父元素选择器