css 选父元素,CSS中模拟父元素选择器

很多情况下，我们需要找到父元素，但可惜的是css中并没有这样的一个选择器。

至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。

简单来说这个实现并不是真正的父元素选择器，只是利用其它思路来实现相同效果罢了。

HTML：

pppppppp

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;

}

效果：