CSS3-僞類選擇器

1.僞類選擇器:

1.1靜態僞類選擇器

:link 選擇一個未訪問的超鏈接

:visited 選擇一個已訪問的超鏈接

例子:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		a:link{color: red}
  		a:visited{color: yellow}
	</style>
</head>
<body>
	<a href="https://www.qq.com/" target="_blank" >騰訊</a>
</body>
</html>

未點擊按鈕前是紅色,點擊完之後變成其它顏色。

這裏有一個問題,點擊完畢後刷新頁面,或者關閉瀏覽器重新打開,不能再現這個行爲,只能修改href地址,才能又顯示爲紅色。感覺是否訪問過跟鏈接地址有關。

1.2動態僞類選擇器

:focus 選擇焦點所在的元素

:hovor 鼠標停留的元素

:active 輸入激活的元素

測試如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		button:focus{color: yellow}
  		button:hover{color:purple }
  	    button:active{color:red }
	</style>
</head>
<body>
	<button>按鈕</button> 
</body>
</html>

這個激活的選擇器就是一瞬間,需要仔細看

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章