(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>
CSS 伪类 学习