国产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 主站蜘蛛池模板: 国产一区二区三区免费在线观看 | 在线国产视频观看 | 国产精品一级片 | 欧美日韩综合网 | 精品视频在线观看视频免费视频 | 国产欧美日韩精品综合 | 91精品欧美一区二区三区 | 中文字幕有码在线观看 | 久久综合激情 | 亚洲免费一区 | 亚洲综合图片小说区热久久 | 亚洲欧美中文字幕 | 亚洲国产成人久久综合野外 | 97精品国产91久久久久久久 | 国产精品视频不卡 | 永久毛片 | 国产在线观看一区二区三区 | 在线视频一区二区 | 国产精品成人一区二区 | 免费一级a毛片在线播放直播 | 国产精品美女流白浆视频 | 欧美激情综合网 | 国产精品视频一区二区三区w | 欧美午夜视频在线 | 国产九九热 | 国产国拍亚洲精品午夜不卡17 | 在线一区二区三区 | 又黄又爽无遮挡免费视频 | 91在线一区二区三区 | 国产一区二区三区欧美 | 成人看片黄a毛片 | 国产一区二区视频在线 | 亚洲国产精品视频 | 精品国产一区二区 | 国产精品日韩精品 | 综合久久综合 | 91精品国产品国语在线不卡 | 日韩在线一区二区 | 国产日韩欧美亚洲综合在线 | 欧美成人视屏 | 成人区精品一区二区不卡亚洲 |