Css詳解之（僞類選擇器）

時間 2019-11-18

標籤 css 詳解選擇器欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"> 
/*
 僞類選擇器：僞類選擇器就是對元素處於某種狀態下進行樣式的。
 
 
 注意： 
 	1. a:hover 必須被置於 a:link 和 a:visited 以後
	
	2. a:active 必須被置於 a:hover 以後
 
*/
 
	
	a:link{color:#F00} /* 沒有被點擊過---紅色 */
	
	a:visited{color:#0F0} /*  已經被訪問過的樣式---綠色 */ 
	
	a:hover{color:#00F;} /* 鼠標通過的狀態---藍 */
 
	a:active{color:#FF0;}
 
</style>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
	<a href="#">百度</a>
</body>
</html>

僞類選擇器案例：css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css" > 
 
	table{
		background-color:#CCC;//設置背景色
		border-collapse:collapse;//設置邊框合併
		border:3px;
	}
	
	tr:hover{//鼠標通過變色
		background-color:#06F;
	}
</style>
 
 
 
<body>
	<table border="1px" width="400px" height="300px" align="center" >
    		<tr>
            	<th>姓名</th>
                <th>成績</th>
                <th>人品</th>
            </tr>
            
            
            <tr>
            	<td>張三</td>
                <td>98</td>
                <td>差</td>
            </tr>
           
           
            <tr>
            	<td>李四</td>
                <td>50</td>
                <td>極好</td>
            </tr>
            
            
            <tr>
            	<td>綜合測評</td>
                <td colspan="2">不錯</td>
            </tr>
        
        
    </table>
 
 
</body>
</html>

1. CSS選擇器：僞類（圖文詳解）
2. css--css選擇器，僞類
3. css選擇器-僞類選擇器
4. css選擇器2——僞類選擇器
5. CSS僞類選擇器
6. css僞類選擇器
7. 5.CSS 僞類選擇器
8. CSS 3 僞類選擇器
9. CSS 僞類選擇器
10. css 僞類選擇器
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• XQuery 選擇和過濾 - XQuery 教程
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
• Flink 數據傳輸及反壓詳解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。