码迷,mamicode.com
首页 > Web开发 > 详细

CSS中模拟父元素选择器

时间:2016-09-17 16:12:30      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

很多情况下,我们需要找到父元素,但可惜的是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中模拟父元素选择器

标签:

原文地址:http://www.cnblogs.com/pssp/p/5878904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!