首页 > 代码库 > 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中模拟父元素选择器