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標籤垂直置中。

 

其實這個原理很簡單，就是原本給父元素添加的樣式給一個子項目添加，讓子項目冒充父元素，定位就好了。

CSS中類比父元素選取器