zoukankan      html  css  js  c++  java
  • 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>
    
    
    

    伪类选择器案例:

    <!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>
    


  • 相关阅读:
    个人作业——软件产品案例分析
    事后诸葛亮(团队)
    【Alpha】阶段总结报告
    【Alpha】Daily Scrum Meeting第十次
    【Alpha】Daily Scrum Meeting第八次
    【Alpha】Daily Scrum Meeting第七次
    【Alpha】Daily Scrum Meeting第六次
    【转】简明 Vim 练级攻略
    简明区分escape、encodeURI和encodeURIComponent
    【拿来主义】当我们谈WEB缓存的时候,我们在谈些什么?
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299799.html
Copyright © 2011-2022 走看看