CSS 的 :target 選擇器把你設定指定元素的樣式

分享:
標籤: CSS CSS3

:target 是一個虛擬類別(pseudo-class) 選擇器,用途是讓我們可以去指定某個目標的樣式,首先我們準備這樣錨點的連結:

<a href="#home">Home</a>
<a href="#shop">Shop</a>
<a href="#">no</a>
<div class="article" id="home">this is home content</div>
<div class="article" id="shop">this is shop content</div>

 

接這套上被 target 後的樣式。

.article:target{
  background: yellow;
}

 

結果

 

這邊再示範一個利用 :target 來做一個不用透過 js 觸發的對話框。

 關閉就是把 :target 的目標移掉就好。