<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>僞類選擇器</title>
<style type="text/css">
/*
僞類:專門用來標識元素一種特殊狀態
eg:訪問過的超鏈接，焦點文本框
當我們需要爲處在這些特殊狀態的元素設置樣式時，使用僞類
*/
/*
爲一個沒訪問過的鏈接設置顏色
:link
-表示未訪問過的鏈接
*/
a:link{
color: aqua;
}
/*
訪問過的鏈接設置顏色
:visited
-表示訪問過的鏈接
瀏覽器通過歷史記錄判斷有沒有被訪問過
visited只能設置字體顏色
*/
a:visited{
color: cornflowerblue;
}
/* 任何元素適用
:hover 僞類鼠標移動狀態
*/
a:hover{
background-color: crimson;
}
/*
:active 超鏈接被點擊狀態
*/
a:active{
color: darkkhaki;
}
/*
:focus 文本框獲取焦點
*/
input:focus{
background-color: darkmagenta;
}
/* 兼容火狐 p::-moz-selection
::selection 僞類爲p標籤中選中內容樣式
*/
p::selection{
background-color: darkorange;
}
</style>
</head>
<body>
<a href="http://www.hao123.com">訪問網頁1</a>
<br/>
<a href="http://www.hao123123.com">訪問網頁2</a>
<!-- 用input創建一個文本輸入框 -->
<input type="text"/>
<p>段落段落段落段落段落段落</p>
</body>
<!--
涉及到a的僞類四個：
:link
:visited
:hover
:active
四個選擇器的優先級是一樣的
-->
</html>
css2.僞類選擇器
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
CSS19. 條件Hack&&屬性Hack
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <style type="text/css"> .box1