CSS 伪类学习

浏览数：11 / 时间：2015年06月09日

(1).链接伪类使用

a:link {color:pink;} -----未点击的链接

a:visited{color:skyblue;}-----已经点击的链接

a:hover{color:red;}-----鼠标移上去的颜色变化

a:active{color:black;}----选定的链接的颜色变化

Tips:

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类名称对大小写不敏感。

(2):first-child伪类使用：像元素的第一个子类添加其效果

li:first-child{font-wight:bold;}

(3)table中的伪类使用（:nth-of-type/:nth-child/:nth-last-child）

:nth-of-type可以通过参数来选择表格的奇数行或偶数行，odd代表奇数行，even代表偶数行。

比如:

table tr:nth-of-type(odd){background-color:pink;}------表格的偶数行为粉红色

table tr:nth-of-typ(even){background-color:red;}-------表格的基数行为红色

table tr:nth-child(n+i){color:pink;}----从表格的第i行下面的字体为粉红色

(4):before伪类使用

p:before{content:url(/work/test.jpg)} ----在P标签前增加一个图片

(5):after伪类的使用

p:after{content:url(/work/test01.jpg)}------在P标签的后面增加一个图片

做了个小小的实验，css初学者，献丑下；

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title>test</title>
  5         <meta http-equiv="Content-type" content="text/html; charset=utf-8">        
  6 <style>
  7 td{text-align:center; width:360px; background-color:lightblue; border:1px solid blue;}
  8 h3{background-color:pink;}
  9 ul{background-color:#DDD;}
 10 .mod{ display:inline-block; text-align:left; min-width:9em;}
 11 .mod li:first-child {
 12     color: red;
 13     font: 50px;
 14 }
 15 
 16 #box{
 17     margin-top: 0px;
 18     height: 50px;
 19     width: 100px;
 20     background-color: skyblue;
 21     border-radius: 20%;
 22 }
 23 #box:active{
 24 background-color: red;
 25 margin-top:20px;     //往下跳20px
 26 }
 27 .yuan{
 28     height: 100px;
 29     width: 100px;
 30     border-radius: 50%;
 31     background-color: pink;
 32     text-align: center;
 33     display: inline-block;
 34     position: relative;
 35 }
 36 .all .yuan:hover::before{    
 37     content: "";
 38     color: #5cb34e; 
 39     position: absolute;
 40     left: 30px;
 41     width: 110px;
 42     height: 110px;
 43     border-radius: 50%;
 44     border: 1px dashed green;
 45      top:20px;
 46 }
 47 .all .yuan:hover{    //鼠标移上去div的颜色变成红色
 48     background-color:red;
 49 }
 50 </style>
 51     </head>
 52     <body>
 53 
 54  <table>
 55         <tbody></tbody>
 56         <tr>
 57             <td>
 58                 <div class="mod">
 59                 <h3 class="hd">工作</h3>
 60                 <ul class="bd">
 61                     <li>找bug</li>
 62                     <li>测试</li>
 63                     <li>coding</li>
 64                 </ul>
 65                 </div>                 
 66             </td>
 67             
 68             <td>
 69                 <div class="mod">
 70                 <h3 class="hd">学习</h3>
 71                 <ul class="bd">
 72                     <li>css </li>
 73                     <li>js</li>
 74                     <li>java</li>
 75                 </ul>
 76                 </div>                 
 77             </td>
 78             
 79             <td>
 80                 <div class="mod">
 81                 <h3 class="hd">玩play</h3>
 82                 <ul class="bd">
 83                     <li>玩游戏</li>
 84                     <li>看电视</li>
 85                     <li>去青岛</li>
 86                 </ul>
 87                 </div>                 
 88             </td>
 89         </tr>
 90     </table>
 91 
 92     <div id="box"></div>
 93     <div class="all">
 94   <div class="yuan">shiping</div>
 95   <div class="yuan">shiping01</div>
 96   <div class="yuan">shiping02</div>
 97   <div class="yuan">shiping03</div>
 98     </div>
 99 </body>
100 </html>