国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當前位置: 首頁 - 科技 - 知識百科 - 正文

你不知道的CSS3目標偽類選擇器target(代碼實例解析)

來源:懂視網 責編:小采 時間:2020-11-02 22:07:57
文檔

你不知道的CSS3目標偽類選擇器target(代碼實例解析)

你不知道的CSS3目標偽類選擇器target(代碼實例解析):最近在梳理CSS的知識,發現了很多知識盲區,歸根結底還是以前學習的時候低估了CSS,認為它太簡單,應該把重點放在JS上面。今天就分享一個實用的CSS3小知識,即css3:target選擇器,還可以用css3:target做一個類似tab的切換效果。相信很多人應該也不熟悉這是屬
推薦度:
導讀你不知道的CSS3目標偽類選擇器target(代碼實例解析):最近在梳理CSS的知識,發現了很多知識盲區,歸根結底還是以前學習的時候低估了CSS,認為它太簡單,應該把重點放在JS上面。今天就分享一個實用的CSS3小知識,即css3:target選擇器,還可以用css3:target做一個類似tab的切換效果。相信很多人應該也不熟悉這是屬
最近在梳理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>
那么a標簽的href屬性會鏈接到#box中,也就是box:target選擇符所選的目標元素,它所指定的樣式就是當a鏈接到這個元素時候,目標元素的樣式。比如你如果想改變鏈接指向#tab的元素字體大小,你可以這樣設置:#tab:target {font-size:30px}。

二、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;
 }

圖片效果:

border1.jpg

以上效果類似于tab的切換效果,你可以在:target偽類中設置你想要的效果,他的用法實際上與:hover、:link、:visited等偽類的用法一樣。在這個案例中,當你點擊標題2時,內容content 2會被激活,顯示背景且字體變大,看看效果吧。

border3.jpg

總結:CSS target目標id所指向的元素,也就是使用了(href=“#xxx”)屬性的元素,一定要用a鏈接,否則沒有效果。以上主要介紹了CSS3的一個冷門知識,最后還用target做一個類似tab的切換效果,希望可以幫助到你!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

你不知道的CSS3目標偽類選擇器target(代碼實例解析)

你不知道的CSS3目標偽類選擇器target(代碼實例解析):最近在梳理CSS的知識,發現了很多知識盲區,歸根結底還是以前學習的時候低估了CSS,認為它太簡單,應該把重點放在JS上面。今天就分享一個實用的CSS3小知識,即css3:target選擇器,還可以用css3:target做一個類似tab的切換效果。相信很多人應該也不熟悉這是屬
推薦度:
標簽: 目標 例子 實例
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top 主站蜘蛛池模板: 亚洲国产精品综合久久一线 | 久久精品2 | 欧美精品第一页 | 日韩欧美电影在线观看 | 国产成人乱码一区二区三区 | 另类在线 | 特黄日韩免费一区二区三区 | 久久艹精品 | 国产a国产片 | 亚洲码欧美码一区二区三区 | 久草福利社| 亚洲精品国产精品乱码不97 | 欧美成人禁片在线www | 欧美日韩免费在线观看 | 国产91精品久久久久久 | 欧美另类网站 | 欧美精品国产一区二区 | 日韩理论在线 | 日本中文字幕有码 | 国产高清免费 | 97精品国产97久久久久久 | 国产精品视频一区二区三区w | 色伊人久久 | 九九久久国产精品大片 | 中文 字幕 高清 在线 | 激情午夜婷婷 | 欧美日本国产 | 在线中文| 欧州人曾交大全 | 国产在线a| 精品免费久久久久国产一区 | 91发布页| 国产精品日韩 | 国产99视频精品草莓免视看 | 亚洲一区中文字幕在线观看 | 日韩在线第二页 | 国产综合成人久久大片91 | 亚洲风情第一页 | 欧美一区二区高清 | 国产一二三区视频 | 国产精品久久久久久久牛牛 |