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

 

完。