|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 最近在梳理CSS的知識,發現了很多知識盲區,歸根結底還是以前學習的時候低估了CSS,認為它太簡單,應該把重點放在JS上面。今天就分享一個實用的CSS3小知識,即css3:target選擇器,還可以用css3:target做一個類似tab的切換效果。相信很多人應該也不熟悉這是屬性吧。那繼續往下看吧。一、怎么使用CSS3:target選擇器 target是CSS3偽類選擇器中的一種,用來匹配文本中某個標志符的目標元素。# 錨的名稱是在一個文件中鏈接到元素的url,元素被鏈接到目標元素。:target選擇器可用于當前激活的target元素的樣式。 具體來說,url中一般會包含一個#,后面帶一個名稱,如#aa,:target就是匹配id為"aa"的目標元素。舉個例子:如一個頁面中有一個a標簽,它的href如下:<a href="#box">按鈕3</a> ,同一個頁面中也會有以box為id的元素,<div id="box">相關內容3</div> 二、CSS3:target實例 就單純用CSS實現,點擊標題1,跳轉到content 1,點擊標題,2,跳轉到content 2的效果。 HTML部分: <p><a href="#news1">標題1</a></p> <p><a href="#news2">標題2</a></p> <p><a href="#news3">標題3</a></p> <p id="news1"><b>content 1</b></p> <p id="news2"><b>content 2</b></p> <p id="news3"><b>content 3</b></p> CSS部分: :target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
font-size:25px;
}圖片效果:
以上效果類似于tab的切換效果,你可以在:target偽類中設置你想要的效果,他的用法實際上與:hover、:link、:visited等偽類的用法一樣。在這個案例中,當你點擊標題2時,內容content 2會被激活,顯示背景且字體變大,看看效果吧。
總結:CSS target目標id所指向的元素,也就是使用了(href=“#xxx”)屬性的元素,一定要用a鏈接,否則沒有效果。以上主要介紹了CSS3的一個冷門知識,最后還用target做一個類似tab的切換效果,希望可以幫助到你! 以上就是你不知道的CSS3目標偽類選擇器target(代碼實例解析)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!