CSS3新增偽類--好用的:target
阿新 • • 發佈：2018-08-17
body ctype input div css com disable -- ron
問：如果讓你實現下圖，點擊跳轉後，讓內容1增加一個背景顏色，你會怎麽做呢？
可能很多小夥伴第一反應是用JS，給跳轉綁定點擊事件，然後用DOM獲取到內容1，在給其添加css樣式。
如果我跟你說用css來實現，你會不會一臉蒙蔽，然後想罵人。哈哈哈。其實用CSS3新增的偽類：target就能輕松搞定。
W3C是這樣定義的，如下圖：
並且該偽類兼容性也很好，現代瀏覽器都支持，只有ie8及以下不支持。
有興趣的小夥伴可以試試下面我寫的demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { background-color: #000; } a { color: #fff; font-size: 30px; } .one,.two,.three { margin: 150px 0; } /*通過偽類:target獲取點擊事件*/ .one:target { color: #fff; font-size: 40px; } .two:target { color: #CD5C5C; font-size: 40px; } .three:target { color: cadetblue; font-size: 40px; } </style> </head> <body> <a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> <div id="one" class="one">123</div> <div id="two" class="two">456</div> <div id="three" class="three">789</div> </body> </html>
補充：其實CSS3還新增了很多好用的偽類。比如，:root（選擇文檔的根元素），:disabled（選擇每個禁用的 <input> 元素）
詳見：http://www.w3school.com.cn/cssref/css_selectors.asp
CSS3新增偽類--好用的:target