《精彩絕倫的CSS》——選擇器(二)為“目標”元素新增樣式(:target)
阿新 • • 發佈:2018-12-26
二、為“目標”元素新增樣式(:target)
有時候我們希望指向文件中某一具體片段時,通常會使用到錨點(anchor)來實現,比如跳轉到某一頁面的id為LLL-target的元素:
<a href="url#LLL-target">head to LLL-target</a>
其中url為該頁面具體url,這樣點選該a標籤就會自動跳轉到指定元素
這樣的話會有個不夠人性化的方面,就是跳轉過去不會有任何提示,視覺上該元素並沒有突出顯示,對於這種情況就可以使用:target偽類
看下面例子:
樣式部分:
#LLL-target:not(:target){ color: black; background: none; } #LLL-target:target{ color: deeppink; background: blue; }
頁面部分:
<h3>這是跟下面那個做對比的</h3> <h3 id="LLL-target">這是待會會跳到的target</h3> <h3><a name="LLL-target">用name做錨點不合適</a></h3> <div style="height: 800px;width: 100%;background-color: green"></div>
<a href="#LLL-target">點這裡看效果</a>
執行後點擊最後的“點這裡看效果”,明顯可以看出id為LLL-target的元素背景跟前景色都發生了變化