CSS選擇父元素的方法

一般來說,CSS選擇器只能一層一層的往下選,但如果想選到父元素怎麼辦?

其實相關需求不在少數,而在CSS4中也有提供類似的選擇器 :has() ,不過目前仍在立案中,我們還無法直接套用在CSS上,但也是可以先來認識一下相關參數及應用,另外,即使CSS還不能套用,但透過js呼叫倒是沒問題的!

首先 :has() 是一個偽元素,範例語法如下:

只要 <a> 的子元素裡有包含 <img>的,就會套用

a:has(img)

 

跟上述類似,有直接包含 <img> 就會套用

a:has(> img)

 

當<a> 的直接子元素裡有 <img>的,才會套用

a:has(+ img)

 

另外 :has() 裡也可以帶入class、id

接著說一下如何用JS套入,語法如下:

$( "a" ).has( "img" ).css( "text-align", "left" );