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


  • 相关阅读:
    testng 控制case运行顺序
    0518 Scrum 项目 5.0
    0506团队项目Scrum 项目1.0
    0429团队项目Scrum团队成立
    0429团队项目对师姐的软件的一些改进
    0422团队项目:二次开发
    0511团队项目2.0产品product backlog
    实验三进程调度模拟程序
    0517 SCRUM团队项目4.0
    0512 SCRUM团队项目3.0
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299799.html
Copyright © 2020-2023  润新知