css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

1. 链接伪类:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类</title>
 6     <style type="text/css">
 7         a:link {color: #FF0000}        /* 未访问的链接 */
 8         a:visited {color: #00FF00}    /* 已访问的链接 */
 9         a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
10         a:active {color: #0000FF}    /* 选定的链接 */
11     </style>
12 </head>
13 <body>
14 
15     <h2>链接伪类</h2>
16     <a href="#">伪类链接</a>
17 
18 </body>
19 </html>

a:link 未访问

a:hover: 鼠标放上.

2.CSS2 - :first-child 伪类

例如: p:first-child 这个表示的是 p 的父元素的第一个子元素是 p ; 如果存在就应用样式, 如果不存在就没有样式.

p:first-child 匹配到:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类</title>
 6     <style type="text/css">
 7         p:first-child {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 
14 
15 
16     <h2>:first-child类</h2>
17     <div>
18         <p>这是p1</p>
19         <div>这是div</div>
20         <p>这是p2</p>
21 
22     </div>
23 
24 </body>
25 </html>

p:first-child 没有匹配到:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类</title>
 6     <style type="text/css">
 7         p:first-child {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 
14 
15 
16     <h2>:first-child类</h2>
17     <div>
18        <div>这是div</div>
19         <p>这是p1</p>
20         <p>这是p2</p>
21 
22     </div>
23 
24 </body>
25 </html>

这是因为 p 元素的父元素 div 的第一个子元素是子 div , 不是 p 元素, 没有匹配到.

-----------------------

css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

1. 链接伪类:

2.CSS2 - :first-child 伪类

参考资料: