首页 > 代码库 > CSS 伪类 学习
CSS 伪类 学习
(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>