基礎知識: :target起作用的是href連接到的位置
如
<a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div>
:target{
color:red;
}
但點擊a標簽的時候，連接到id是tab1的div，對這個div起作用color:red;
如：
<a href="#tab">Test :target</a> <a href="#tab2">Test 2:target</a> <div id="tab">This is a tab.</div> <div id="tab2">This is another tab.</div>
#tab:target{
color:red;
}
#tab2:target{
color:blue;
}
結果：
點擊第一個a標簽時連接到id是tab的div，對這個div起作用color:red;
點擊第二個a標簽時連接到id是tab2的div，不對這個div起作用color:red;
利用target的特性，可以實現純css的tab效果切換
具體代碼：（ie8以及ie8以下實現不了）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /*public*/ body{ margin: 0; padding: 0; } a { color:#98a61a } a:hover { color:#006acd } ul { list-style:none } /*樣式開始 */ .tablist { position:relative; margin:200px; /*為了效果*/ width: 632px; /*寬度為單個文本框寬度+padding+border*/ height:200px; /*高度為單個文本框高度+padding*/ } .tabmenu { position:absolute; top:100%; /*標簽選項在文本框下面顯示*/ margin:0; } .tabmenu li{ display:inline-block; /*標簽選項並排顯示*/ } .tabmenu li a { display:block; padding:5px 10px; margin:0 10px 0 0; /*為了效果 */ border:1px solid #91a7b4; /*邊框效果 */ border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; /*圓角效果*/ color:#333; /*字體顏色*/ background:#e3f1f8; /*背景顏色*/ } .tab_content { position: absolute; width:600px; height:170px; /*大小*/ padding:15px; /*為了效果*/ border:1px solid #91a7b4; /*邊框效果 */ border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; /*圓角效果*/ box-shadow:0 2px 3px rgba(0,0,0,0.1); -moz-box-shadow:0 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1); /*陰影效果*/ word-wrap: break-word; /*超出換行*/ font-size:18px; /*字體大小*/ line-height:27px; color:#666; /*字體顏色*/ background:#fff; /*背景顏色*/ }
/*核心代碼 */ #tab1:target, #tab2:target, #tab3:target { z-index: 1; } </style> </head> <body> <div class="tablist" > <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div id="tab1" class="tab_content">tab1</div> <div id="tab2" class="tab_content">tab2tab2</div> <div id="tab3" class="tab_content">tab3tab3tab3</div> </div> </body> </html>
效果圖如下：
最關鍵的代碼：
#tab1:target, #tab2:target, #tab3:target {//鏈接到#tab1，#tab2，#tab3時z-index為 1
z-index: 1;
}
原理其實很簡單，就是把tab元素設為絕對對定位absolute,再通過:target偽類改變它們的層級（z-index）。
先根據target的特性錨鏈接到對應的div,再根據z-index的屬性，改變div的層級關系，從而實現tab的切換效果！
初始z-index：auto，根據target的特性錨鏈接到對應的div,設置z-index：1；
Tab1按鈕
<a href="#tab1">tab1</a>
指向的是
Tab2按鈕
<a href="#tab1">tab1</a>
指向的是第二個
Tab3按鈕
<a href="#tab1">tab1</a>
指向的是第三個
點擊Tab1按鈕時z-index值：
知識點：
1. CSS3 :target 選擇器（w3school）
定義和用法
URL 帶有后面跟有錨名稱 #，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。
:target 選擇器可用於選取當前活動的目標元素。
例子：
<!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } </style> </head> <body> <h1>這是標題</h1> <p><a href="#news1">跳轉至內容 1</a></p> <p><a href="#news2">跳轉至內容 2</a></p> <p>請點擊上面的鏈接，:target 選擇器會突出顯示當前活動的 HTML 錨。</p> <p id="news1"><b>內容 1...</b></p> <p id="news2"><b>內容 2...</b></p> <p><b>注釋：</b> Internet Explorer 8 以及更早的版本不支持 :target 選擇器。</p> </body> </html>
結果：
當我點擊“跳轉至內容 1”的時候，變成了這樣
延伸知識點：（參考資料CSS3制作手風琴——CSS3 :target的應用）
我們可以先來看看今天我們要實現的效果
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> a { color: #424242; text-decoration: none; } .accordionMenu { width: 500px; font: 12px Arial, Verdana, sans-serif; /*字體設置*/ color:#424242; /*字體顏色*/ background: #fff; /*背景顏色*/ } .accordionMenu h2 { margin:5px 0; /*清除樣式*/ position: relative; } .accordionMenu h2:before { content:""; border: 5px solid #fff; border-color: #fff transparent transparent; width: 0; height: 0; position:absolute; right: 10px; top: 15px; } .accordionMenu h2 a { font-size: 13px; display: block; padding:10px; background: #8f8f8f; background: -moz-linear-gradient( top, #cecece, #8f8f8f); background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f)); background: -webkit-linear-gradient( top, #cecece, #8f8f8f); background: -o-linear-gradient( top, #cecece, #8f8f8f); /*css漸變色，下次專門開篇文章介紹*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)"; /*針對ie瀏覽器的css漸變色*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*圓角*/ text-shadow:2px 2px 2px #aeaeae; -webkit-text-shadow:2px 2px 2px #aeaeae; -moz-text-shadow:2px 2px 2px #aeaeae; /*文字陰影，下次專門開篇文章介紹*/ } .accordionMenu :target h2 a, .accordionMenu h2 a:focus, .accordionMenu h2 a:hover, .accordionMenu h2 a:active { background: #2288dd; background: -moz-linear-gradient( top, #6bb2ff, #2288dd); background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd)); background: -webkit-linear-gradient( top, #6bb2ff, #2288dd); background: -o-linear-gradient( top, #6bb2ff, #2288dd);/*css漸變色，下次專門開篇文章介紹*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)"; color:#FFF; } .accordionMenu p { margin:0;/*清除樣式*/ height: 0; overflow: hidden;/*初始不顯示，所以高度設為0，超出隱藏*/ -moz-transition: height 0.5s ease-in; -webkit-transition: height 0.5s ease-in; -o-transition: height 0.5s ease-in; transition: height 0.5s ease-in; /*動畫transition，下次專門開篇文章介紹*/ } .accordionMenu :target p { overflow: auto; height:100px; } .accordionMenu :target h2:before { border-color: transparent transparent transparent #fff; } </style> </head> <body> <div class="accordionMenu"> <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>content for Brand</p> </div> <div class="menuSection" id="promotion"> <h2><a href="#promotion">Promotion</a></h2> <p>content for promotion</p> </div> <div class="menuSection" id="event"> <h2><a href="#event">Event</a></h2> <p>content for Event</p> </div> </div> </body> </html>
難理解的樣式
1.accordionMenu :target p
2.accordionMenu :target h2:before
3.accordionMenu :target h2 a
下面我們來分析一下：
原理：
1.使用了“div.accordionMenu”包裝了手風琴所有塊；
2.“div.menuSection”包含手風琴每塊的標題和主內容
3.把手風琴每塊的標題定義為“h2”
4手風琴每塊主內容放在了一個“p”中，並與“h2”相鄰，當然大家也可以把主內容放置在一個“div”中，容易管理
5.此處最關鍵的一點是正如前面介紹“target”，我們使用“target”來達到點擊展開動畫效果，我們每一塊需要ID來配合使用，因此我們在手風琴中的每一塊中定義了一個ID號，並且在標題中的“<a>”鏈接的“href”屬性鏈接了相對應塊的ID號。
這一步是我們這個教程中最為關鍵的一步，我們使用了CSS3的偽類“:target”實現點擊面板標題時，改變面板主內容“p”的高度。
.accordionMenu :target p {
overflow: auto;
height:100px;
}
第一個a標簽點擊鏈接到
<div class="menuSection" id="brand"></div>
也就是這里
要想使brand模塊展開的話，改變面板主內容“p”的高度。
可以這樣寫
# brand:target p {
overflow: auto;
height:100px;
}
第二個a標簽點擊鏈接到
<div class="menuSection" id="promotion"></div>
也就是這里
要想使promation模塊展開的話，改變面板主內容“p”的高度。
可以這樣寫
# promation:target p {
overflow: auto;
height:100px;
}
第三個a標簽點擊鏈接到
<div class="menuSection" id="event"></div>
也就是這里
要想使Event模塊展開的話，改變面板主內容“p”的高度。
可以這樣寫
#Event:target p {
overflow: auto;
height:100px;
}
這三個樣式的的內容是一樣的，
可以用他們的父元素:target p來設置樣式以優化代碼
得到：
.accordionMenu :target p {
overflow: auto;
height:100px;
}
另外兩個難理解的樣式涉及到了:before和用boder畫三角的知識，這里就先不講了，之后會專門寫文來探討下這2部分內容。
（可以看這里：純css來畫圖-border應用）
2. 超鏈接
（1） 偽類（參考資料：CSS中偽類及偽元素用法詳解）
link 適用於未被用戶訪問過的鏈接（只有超鏈接才會有）
visited適用於已被用戶訪問過的鏈接（只有超鏈接才會有）
hover 適用於光標（鼠標指針）置於其上的連接（可以應用於任何元素）
active 適用於被點擊過的連接（可以應用於任何元素）
注意：
在使用超鏈接的偽類的時候，需要按照link->visited->hover->active的順序來定義。
1）:active 適用於一個元素被激活時的樣式，例如鼠標在此元素的區域內按下但還沒有釋放時
瀏覽器支持：
所有主流瀏覽器都支持 :active 偽類。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #box{ width:100px; height:100px; background:blue; } #box:active{ background:red; } </style> </head> <body> <div id="box"></div> </body> </html>
結果：
解釋：鼠標松開是指針樣式，又變回藍色。
小結：
1.一般a:active樣式效果是瞬間效果觀察不了，所以使用時候可以不用設置。同時超鏈接默認情況下是自動加下划線的，如果要去掉或再增加下划線可以設置css text-decoration 。
2.最常見的例子就是在 HTML 文檔中點擊一個超鏈接：在鼠標按鈕按下期間，這個鏈接是激活的。
正如之前所說的:active經常用在按鈕的點擊上：
大致寫法就是：在點擊之后讓按鈕的坐標下移1-2像素並縮小外部陰影，由此給人一種立體的感覺。
大致的效果：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ margin:0; padding:0; } #box{ width:100px; height:50px; margin:0 auto; line-height:50px; /*字水平垂直居中*/ text-align:center; /*字水平垂直居中*/ background:#56a1e4; /*背景顏色*/ border:1px solid #569AD7; /*邊框顏色*/ color:#fff; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; /*圓角*/ box-shadow:0 0 8px #204080; -moz-box-shadow:0 0 8px #204080; -webkit-box-shadow:0 0 8px #204080; /*陰影*/ cursor: pointer; } #box:hover { background:#4891dd; /*hover背景顏色*/ border:1px solid #4A90D9; /*hover邊框顏色*/ } #box:active{ background: #08c; /*激活時背景顏色*/ border:1px solid #0389CD; /*激活時背景顏色*/ box-shadow:0 0 3px #204080; -moz-box-shadow:0 0 3px #204080; -webkit-box-shadow:0 0 3px #204080; /*激活時陰影*/ margin-top:2px; } </style> </head> <body> <div style="height:100px;"></div> <div id="box">登錄</div> </body> </html>
2）當我們需要對某一對象添加當鼠標懸浮之上時改變樣式，就可以用到:hover偽類。
這里還是用按鈕來做演示：
1.當光標放在按鈕上，按鈕的背景色和文字顏色做一反色並加上漸變
2. :hover的好搭檔cursor屬性，當屬性值為pointer時，光標覆蓋目標時會變成手型。
3.cursor還有url屬性，其為設置圖片地址。在之后用javascript或者HTML5做游戲時，系統的光標就顯得格格不入了。這里可以通過cursor將光標變成你想要的手型圖片，比如這樣的：
此時cursor屬性可以放在全局body{}里或者任何你需要的地方。
舉個例子：
鼠標圖案為
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #box{ width:100px; height:100px; background:blue; } #box:active{ background:red; } #box:hover{ cursor:url("mfb.gif"),pointer } </style> </head> <body> <div id="box"></div> </body> </html>
效果圖：
備注：大家可以在ie瀏覽器中測試下，可以發現鼠標並沒有變成魔法棒的樣式，這是為什么呢？
偷偷地告訴你們，這里用到的圖片格式是gif，並不是cur，而IE只支持cur,ani,ico這三種格式，所以你懂得......
所以，大家要記得，IE支持cur,ani,ico這三種格式，FF支持bmp,gif,jpg,cur,ico這幾種格式，因此來說一般將url引用的圖片存為ico或cur格式比較好，還有就是網上都說鼠標圖片的尺寸推薦尺寸是32*32，否則可能會導致圖標大小不一致，但之前我用的鼠標圖片尺寸是48*48，並沒發現各個瀏覽器中圖片尺寸不一致，但是感覺尺寸是32*32時確實是鼠標圖片的最佳尺寸，超過的話，鼠標圖片太大，點擊文字的鏈接使用起來不太方便。
延伸：
反色效果：invert濾鏡（ie11無效）
invert濾鏡就是為了設置元素的反色效果，他的值設置范圍為：0-100%，100%為完
轉以后的效果。
我們看到Invert屬性實際上達到的是一種“底片”的效果
invert：反色
語法：
STYLE="filter:Invert"
【反色】
style="filter:Invert"
圖片反色代碼例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .inverted { filter: invert(100%); -webkit-filter:invert(100%); -moz-filter:invert(100%); -ms-filter:invert(100%); -o-filter:invert(100%); } </style> </head> <body> <p>原圖</p> <img src="kitty.jpeg" width="100" height="150"> <p>反轉色圖</p> <img src="kitty.jpeg" width="100" height="150" class="inverted" alt="反轉色圖"> </script> </body> </html>
效果圖：
樣式背景反色：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #box{ width:100px; height:100px; background:#FFB8B4; } #box:hover{ filter: invert(100%); -webkit-filter:invert(100%); -moz-filter:invert(100%); -ms-filter:invert(100%); -o-filter:invert(100%); } </style> </head> <body> <div id="box"></div> </body> </html>
效果圖：
cursor：（cursor的樣式可以參照學習mdn技術文檔）
3) :focus
當我們需要讓點擊之后的元素一直擁有某些樣式，這時用:active就不行了，因為松開鼠標樣式會消失。:focus可以用在<input>標簽上。
（2） href（參考資料：超鏈接的那些事(二)）
定義
href 屬性用於指定超鏈接目標的 URL。
用法
①. 錨點
同一頁面添加錨點
（1）<a href="#test">連接到本頁面的錨的超鏈接</a> //點擊的連接
（2）<a name="test">錨</a> //放到要跳轉內容的地方
跨頁面添加錨點
（1）在test2.html創建錨<a name="test">錨</a>
（2）在test1.html設置好連接<a href="test2.html#test">連接到另外頁面的錨的超鏈接</a>
②. 下載
<a href="download.rar"></a>
href中的url需要有效，文件最好是rar格式
<a href="tel:電話號碼"></a>
郵箱標簽: mailto
屬 性： cc: 抄送
bcc: 暗抄
subject：主題
body：郵箱內容
常規
<a href="mailto: xxx@xx.com"></a>
利用逗號(,) 多地址發送
<a href="mailto: xxx@xx.com, xxx@xx.com"></a>
利用屬性
<a href="mailto: xxx@xx.com?cc=xxx@xx.com&bcc=xxx@xx.com&subject=主題&body=內容"></a>
⑤. Javascript
直接調用javascript
<a href="javascript: function_name()"></a>
W3C標准不推薦在href里面執行javascript語句.這種方法在傳遞this等參數的時候很容易出問題，而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onbeforeunload事件，在IE里面更會使gif動畫圖片停止播放。
使用void, ::, undefined, 配合onclick
<a href="javascript::" onclick="function_name()"></a> <a href="javascript:void(0)" onclick="function_name()"></a> <a href="javascript:undefined" onclick="function_name()"></a>
最常用的方法，也是最周全的方法，地址不發生跳轉，不會在地址欄暴露Js方法
'#'和onclick
<a href="#" onclick="function_name()"></a>
'#'是標簽內置的一個方法，代表top的作用，所以執行方法后返回頁面最頂端。
<a href="#" onclick="function_name(); return false;"></a>
執行'return false'后，頁面不發生跳轉，頁面停留在當前位置。
3.border-radius，box-shadow 注意下寫法，具體看代碼
4.word-wrap: break-word; /*超出換行*/
注意：本文為原創，轉載請以鏈接形式標明本文地址 ，謝謝合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5669937.html