CSS E:target
E:target是一個偽類選擇器。
連結<a>元素除了能夠規定點選跳轉的連結地址。
也能建立一個錨點,程式碼片段你如下:
[HTML] 純文字檢視 複製程式碼<a href="#antzone1">螞蟻部落一</a>
點選上述連結,能夠將頁面定位到id屬性值為"antzone1"元素處。
那麼這個id屬性值為"antzone1"元素即是target目標元素。
當此目標元素被啟用時,也就是點選錨點連結時,
選擇器可以匹配被啟用的目標元素,點選錨點連結時,目標元素被啟用。
語法結構:
[CSS] 純文字檢視 複製程式碼E:target{ Rules }
瀏覽器支援:
(1).IE9+瀏覽器支援此選擇器。
(2).edge瀏覽器支援此選擇器。
(3).谷歌瀏覽器支援此選擇器。
(4).火狐瀏覽器支援此選擇器。
(5).opera瀏覽器支援此選擇器。
(6).safria瀏覽器支援此選擇器。
例項程式碼:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> p { width:300px; } p:target { background-color:#ccc; font-size:12px; } </style> </head> <body> <p><a href="#antzone1">螞蟻部落一</a></p> <p><a href="#antzone2">螞蟻部落二</a></p> <p id="antzone1"><b>本站的url地址是www.softwhy.com</b></p> <p id="antzone2"><b>歡迎來到螞蟻部落</b></p> </body> </html>
上述程式碼中,上面的兩個錨點,可以啟用對應的target元素。
於是就可以設定target目標元素的字型大小和背景顏色。
相關文章
- 深入理解e.target與e.currentTarget
- CSS E:not()CSS
- CSS E:emptyCSS
- CSS E:rootCSS
- 所以,e.target 和 e.currentTarget 到底有啥區別呢?
- CSS E[att^="val"]CSS
- CSS E::selectionCSS
- CSS E:first-childCSS
- CSS E:first-of-typeCSS
- CSS E:last-childCSSAST
- CSS E:only-of-typeCSS
- CSS E::first-letterCSS
- CSS E:only-childCSS
- CSS E:last-of-typeCSSAST
- CSS E:nth-child(n)CSS
- CSS E:enabled 選擇器CSS
- CSS E:focus 選擇器CSS
- CSS E,F 選擇器CSS
- CSS E[att]選擇器CSS
- CSS E:active 選擇器CSS
- CSS E:nth-of-type(n)CSS
- CSS E:nth-last-of-type(n)CSSAST
- CSS E[att*="val"]選擇器CSS
- CSS E:nth-last-child(n)CSSAST
- CSS E~F 兄弟選擇器CSS
- CSS E:link 選擇器CSS
- CSS E:visited 選擇器CSS
- CSS E[att$="val"] 選擇器CSS
- CSS E F 包含選擇器CSS
- CSS E[att|="val"]選擇器CSS
- CSS E[att~="val"]選擇器CSS
- CSS (E>F)子選擇符CSS
- CSS E[att="val"]選擇器CSS
- CSS E:default 偽類選擇器CSS
- CSS E::after 偽元素選擇器CSS
- CSS E:disabled偽類選擇器CSS
- CSS E:disabled 偽類選擇器CSS
- CSS E:checked 偽類選擇器CSS