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标签垂直居中。

其实这个原理很简单，就是原本给父元素添加的样式给一个子元素添加，让子元素冒充父元素，定位就好了。

结合模拟单击事件使用。

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

完。