target偽類製作tab選項卡

2022-05-12 19:40:32 字數 1606 閱讀 2758

:target偽類的作用是突出顯示活動的html錨，下面是乙個簡單的例子：

html**：

1


<


div>


2<


a href


="#demo1"


>點選此處


a>


3div


>


4<


div 


id="demo1"


>測試結果


div>
css**：

1


:target
點選a元素之後，目標元素#demo1的樣式發生了變化，變化的樣式即css**所寫的。

:target是css3新增的屬性，目前最常用到的地方便是tab選項卡製作。

以前的tab選項卡一般運用js或者jquery來實現，現在只要用css3的:target便可以完成。

**示例：

html**：

1


<


ul class


="tab-title"


>


2<


li><


a href


="#music"


>**


a>


li>


3<


li><


a href


="#fun"


>娛樂


a>


li>


4<


li><


a href


="#photo"


>攝影


a>


li>5ul


>


6<


div 


id="music"


>**


div>


7<


div 


id="fun"


>娛樂


div>


8<


div 


id="photo"


>攝影


div>
css**：

1


ul12


li18


li:nth-child(3)


21li > a 


27li:nth-child(1) > a


30li:nth-child(3) > a


33li > a:hover 


36div


49#music:target,#fun:target,#photo:target;
上面**中除了必須設定:target為index:1,以及目標元素的position:absolute，其他的都是基本樣式

顯示效果為：

以上就是:target製作tab選項卡的過程

by新手小白的記錄

關於偽類 target

什麼是target偽類？先看一下解釋 url後面跟錨點 指向文件內某個具體的元素。這個被鏈結的元素就是目標元素 target element target選擇器用於選取當前活動的目標元素。舉個例子 html a href target 點我 a div id target div html 正常情況...

Vue製作tab選項欄

tab li tab div tab div.current active style head demo 1.先用靜態標籤來構建頁面 2.然後用vue.js來重構 tab shift index class currentindex index?active key index v for ite...

CSS3 target偽類簡介

css3 target偽類是眾多實用的css3特性中的乙個。它用來匹配文件 頁面 的uri中某個標誌符的目標元素。具體來說，uri中的標誌符通常會包含乙個 字元，然後後面帶有乙個標誌符名稱，比如 respond，target就是用來匹配id為respond的元素的。現在在頁面中，點選乙個id鏈結後，...