這次實驗主要熟悉css中的後代選擇器：nth-child,nth-of-type ,  >, (空格), + 之類的用法：

複合選擇器：

後代選擇器： p span {font-size: 14px;} 選擇p元素的所有子孫元素中的span元素
子女選擇器： p>span {font-size: 14px;} 選擇p元素的所有子女元素中的span元素
組合選擇器： p#start {font-size: 14px;} 選擇id為start的p元素(交集)
群組選擇器： em, .even {font-size: 14px;} 選擇em元素或者類名為even的元素
相鄰兄弟選擇器： h1 + p 

nth-child選擇器(結構偽類)：
p:first-child {color:red;} p的雙親的第一個子女
p:last-child {color:red;} p的雙親的最後一個子女
p:only-child {color:red;} p的雙親的唯一一個子女
p:nth-child(5) {color:red;} p的雙親的第5個子女

nth-of-type選擇器(結構偽類) ：
p:first-of-type {color:red;} p的雙親的第一個子女(只計算p元素)
p:last-of-type {color:red;} p的雙親的最後一個子女
p:only-of-type {color:red;} p的雙親的唯一一個子女
p:nth-of-type(5) 

nth-child的其它用法： 
:nth-child(n+6) 選中從第6個開始的子元素
:nth-child(-n+9) 選中從第1個到第9個子元素
:nth-child(n+4):nth-child(-n+8) 選中第4-8個子元素
:nth-child(n+2):nth-child(-n+9):nth-child(odd) 選中的子元素是從第2位到第9位，並
且只包含奇數位。

實驗CSS程式碼如下：

1. <styletype="text/css">
2.         a:link{text-decoration:none;color:black;} <!--偽類-->
3.         li:nth-child(even) a:link{text-decoration:none;color:green;} <!-- li雙親的第偶數個子女元素  未被訪問的連結 -->
4.         a:visited{text-decoration:none;color:black;} <!-- 訪問過的連結 -->
5.         li:nth-child(even) a:visited{text-decoration:none;color:green;} <!-- li雙親的第偶數個子女元素中 被訪問過的連結  -->
6.         a:hover{text-decoration:underline;color:blue;}   
7.         li:nth-child(even) a:hover{text-decoration:underline;color:blue;}   
8.         a:active{text-decoration:underline;color:red;}   
9.         li:nth-child(even) a:active{text-decoration:none;color:green;}  
10. <style>
11. <styletype="text/css">
12.         input:focus,textarea:focus{background-color:yellow;} <!--選擇獲得焦點的 input 或者 textarea元素 -->
13.         button:disabled,input:disabled{color:#CCC;} <!--禁用的button或者input元素 -->
14.         input:checked+span{color:red;} <!-- 被選中的input元素的相鄰兄弟span-->
15.         textarea::selection{color:white;background-color:blue;}<!-- 選中的文字-->
16. <style>
17. <styletype="text/css">
18.         a{color:blue;text-decoration:underline;} <!-- -->
19.         li:nth-child(even) a{color:green;}<!-- li的雙親的第偶數個子女中的後代a元素-->
20.         li:nth-child(n+3):nth-child(-n+9):nth-child(odd) a{color:red;}<!--選中的子元素是從第3位到第9位，並且只包含奇數位 -->
21. <style>
22. <styletype="text/css">
23.         a:link,a:visited{color:blue;text-decoration:none;}  
24.         a:active{color:#532301;text-decoration:none;}  
25.         p{text-align:left;text-indent:2em;}  
26.         p:first-letter{font-size:1.5em} <!--選擇每個 <p> 元素的首字母-->
27.         p:first-line{font-style:italic;} <!--選擇每個 <p> 元素的首行 -->
28.         p:hover{color:green;}   
29.         p:nth-of-type(even){font-weight:bold;} <!--p的雙親的第偶數個子女 -->
30.         .ref{vertical-align:super;font-size:10px;} <!-- 選擇ref類 -->
31.         <!-- 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。super垂直對齊文字的上標-->
32. <style>
33. <styletype="text/css">
34.     p:nth-child(n+3){text-indent:2em;} <!-- 從第3個開始的子女元素-->
35.     p:first-letter{color:blue;font-size:1.5em;}  <!-- p元素的第一個字母 -->
36.     span{display:none;} <!--display屬性用於定義建立佈局時元素生成的顯示框型別 ,none此元素不會被顯示。-->
37.     span:first-child{display:inline;} <!-- span的雙親的第一個子女，顯示為內聯元素，元素前後沒有換行符-->
38.     p:hover span{display:inline;} <!--滑鼠置於上方的p元素中的子孫span元素 -->
39.     p:nth-child(n+3){text-align:left;} <!-- p的第3個開始的子元素-->
40. <style>
41. <styletype="text/css">
42.   tr:first-child > td{background-color:#DDD}<!-- tr雙親的第一個子女元素 的 子孫td元素-->
43.   td:nth-child(even){background-color:rgb(200,200,255);}<!-- td的雙親的第偶數個子女元素-->
44.   tr:nth-of-type(2) td:nth-child(-n+3){color:grey;}<!--tr雙親的第2個子女 的 子孫td元素 中的 第1個到第3個子元素 -->
45.   tr:nth-of-type(2) td:nth-child(n+4):nth-child(-n+7):after,tr:nth-of-type(3) td:nth-child(-n+4):after{content:"*";}   
46.   <!-- tr雙親的第2個子女的 子孫中  的td元素第4個到第7個的子元素的內容之後插入“*”-->
47.   <!-- tr雙親的第3個子女的 子孫中  的td元素第4個到第7個的子元素的內容之後插入“*”-->
48. <style>
49. <styletype="text/css">
50.     tr:nth-of-type(odd)>td:nth-of-type(odd),tr:nth-of-type(even)>td:nth-of-type(even){background-color:rgb(200,200,200);}  
51.     <!--tr的雙親的第奇數個子女 的後代 td元素中為基數的， 同。。 -->
52.   tr:nth-of-type(odd) >td:nth-of-type(even),tr:nth-of-type(even) >td:nth-of-type(odd){background-color:rgb(100,100,100);}  
53.   tr:nth-of-type(odd)>td:nth-of-type(odd):hover,tr:nth-of-type(even)>td:nth-of-type(even):hover{background-color:rgb(200,200,240);}  
54.   <!-- tr的雙親的第奇數個子女 的後代 td元素中為基數的 並且滑鼠放置其中的-->
55.   tr:nth-of-type(odd) >td:nth-of-type(even):hover,tr:nth-of-type(even) >td:nth-of-type(odd):hover{background-color:rgb(100,100,160);}  
56.   tr:nth-child(n+7) td>img:hover{border:dashed 1px yellow;margin:auto}<!-- tr的第7個以後的子女元素中的td元素 的img子女元素 hover時 -->
57.   tr:nth-child(-n+2) td>img:hover{border:dashed 1px red;margin:auto}  
58. <style>