很多情况下，我们需要找到父元素，但可惜的是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标签垂直居中。
其实这个原理很简单，就是原本给父元素添加的样式给一个子元素添加，让子元素冒充父元素，定位就好了。
结合模拟单击事件使用。
HTML：
<div id="box">
<a href="#a" id="a">点击我！</a>
<span></span>
</div>
CSS：
body,div{
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>a:target + span{
box-shadow:0px 0px 0px 1px red;
}
#box>a{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%);
z-index:1;text-decoration:none;
}
效果
css模拟单击事件的实现就是通过这个实现的。
<a href="#a" id="a">点击我！</a>
然后通过css的:target可以获取当前正在点击的元素。
a:target
完。
