CSS3學習筆記 之 目標偽類選擇器
阿新 • • 發佈：2019-01-06
目標偽類選擇器用來匹配文件（頁面）的URI中某個識別符號的目標元素。URI中的識別符號通常會包含一個丼號，後面帶有一個識別符號名稱，例如#contact:target就是用來匹配ID為contact的元素被URI選中時候的樣式的，:target偽類選擇器選取連結的目標元素，然後供定義樣式。
目標偽類選擇器語法如下：
| 選擇器 | 功能描述 |
| E:target | 選擇匹配E的所有元素，且匹配元素被相關URL指向 |
顯示效果如下:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>垂直手風琴</title> <style type="text/css"> .accordionMenu { background: #fff; color:#424242; font: 12px Arial, Verdana, sans-serif; margin:0 auto; padding: 10px; width: 500px; } .accordionMenu h2 { margin:5px 0; padding:0; position: relative; } .accordionMenu h2:before { border: 5px solid #fff; border-color: #fff transparent transparent; content:""; height: 0; position:absolute; right: 10px; top: 15px; width: 0; } .accordionMenu h2 a { 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); background: linear-gradient( top, #cecece, #8f8f8f); border-radius: 5px; color:#424242; display: block; font-size: 13px; font-weight: normal; margin:0; padding:10px 10px; text-shadow: 2px 2px 2px #aeaeae; text-decoration:none; } .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); background: linear-gradient( top, #6bb2ff, #2288dd); color:#FFF; } .accordionMenu p { margin:0; height: 0; overflow: hidden; padding:0 10px; -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; } .accordionMenu :target p { height:100px; overflow: auto; } .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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="menuSection" id="promotion"> <h2><a href="#promotion">Promotion</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="menuSection" id="event"> <h2><a href="#event">Event</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
類似於如下程式碼：
.accordionMenu :target p {
height:100px;
overflow: auto;
}還有維基百科裡面當檢視某註解的上標連結的時候會高亮顯示該註解，其效果也是使用目標偽類顯示器實現的，效果如下：
其中4號連結被檢視的時候會為其加底色高亮顯示，其對應的URL為：http://en.wikipedia.org/wiki/Hurricane_John_(1994)#cite_note-JTWCreport-4
| 效果 | 地址 |
| 高亮顯示區塊 | http://red-team-design.com/get-to-know-your-css3-target-pseudo-class/ |
| 從相互層疊的盒容器或圖片中突出顯示其中一項 | http://virtuelvis.com/gallery/css3/target/interface.html |
| tabs效果 | http://css-tricks.com/css3-tabs/ |
| 幻燈片效果 | http://designmodo.com/slider-css3/ |
| 燈箱效果 | http://decodize.com/demos/CSS3-target-pseudo-class/gallery.html |
| 相簿效果 | http://www.ie7nomore.com/fun/scroll |
參考資料：