css3--:target選擇器稱為目標選擇器
阿新 • • 發佈:2017-07-16
相對 標簽 分享 and range tar marker splay menu
:target
選擇器稱為目標選擇器,用來匹配文檔(頁面)的url的某個標誌符的目標元素。我們先來上個例子,然後再做分析。
示例展示
點擊鏈接顯示隱藏的段落。
HTML代碼:
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div>
CSS代碼:
.menuSection{ display: none; } :target{/*這裏的:target就是指id="brand"的div對象*/ display:block; }
演示結果:
分析:
1、具體來說,觸發元素的URL中的標誌符通常會包含一個#號,後面帶有一個標誌符名稱,上面代碼中是:#brand
2、:target就是用來匹配id為“brand”的元素(id="brand"的元素),上面代碼中是那個div元素。
多個url(多個target)處理:
就像上面的例子,#brand與後面的id="brand"是對應的,當同一個頁面上有很多的url的時候你可以取不同的名字,只要#號後對的名稱與id=""中的名稱對應就可以了。
如下面例子:
html代碼:
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div>
css代碼:
#brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }
上面的代碼可以對不同的target對象分別設置不的樣式。
我的理解:
就是通過::target這個選擇器讓a標簽裏面的href來控制和href裏面名字一樣的id相對應的元素
css3--:target選擇器稱為目標選擇器