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>
    


  • 相关阅读:
    socket 网络编程
    错误与异常
    正则与计算器
    正则爬虫案例
    面向对象
    模块与包
    常用模块-----configparser & subprocess
    正则表达式&re模块
    常用模块---sys&logging&序列化模块(json&pickle)
    常用模块----time&random&hushlib&os
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299799.html
Copyright © 2011-2022 走看看