位置選擇器：
一、.:first-child選擇器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>first-child選擇器的使用</title> <style type="text/css"> p:first-child{color: red;} </style> </head> <body> <p>第一篇 畢業了</p> <p>第二篇 關於考試</p> <p>第三篇 夏日飛舞</p> <p>第四篇 惆悵的心</p> <p>第五篇 暢談美麗</p> </body> </html>
結果：
二、.:last-child選擇器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>last-child選擇器的使用</title> <style type="text/css"> p:last-child{color: blue;} </style> </head> <body> <p>第一篇 畢業了</p> <p>第二篇 關於考試</p> <p>第三篇 夏日飛舞</p> <p>第四篇 惆悵的心</p> <p>第五篇 暢談美麗</p> </body> </html>
結果：
三、.:nth-child(n)選擇器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>nth-child(n)選擇器的使用</title> <style type="text/css"> p:nth-child(2){color: red;} </style> </head> <body> <h1>這是標題</h1> <p>第一篇 畢業了</p> <p>第二篇 關於考試</p> <p>第三篇 夏日飛舞</p> <p>第四篇 惆悵的心</p> <p>第五篇 暢談美麗</p> <h1>這是標題</h1> </body> </html>
結果：
四、.:nth-of-type(n)選擇器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>nth-child(n)和nth-last-child(n)選擇器的使用</title> <style type="text/css"> /* p:nth-child(2){color: red;}*/ p:nth-last-child(2){color: blue;} </style> </head> <body> <h1>這是標題</h1> <p>第一篇 畢業了</p> <p>第二篇 關於考試</p> <p>第三篇 夏日飛舞</p> <p>第四篇 惆悵的心</p> <p>第五篇 暢談美麗</p> <h1>這是標題</h1> </body> </html>
結果：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>nth-of-type(n)和nth-last-of-type(n)選擇器的使用</title> <style type="text/css"> h2:nth-of-type(2n+1){color: red;} h2:nth-of-type(2n){color:green;} p:nth-last-of-type(2){color: blue;} </style> </head> <body> <h2>網頁設計</h2> <p>網頁設計是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策划，然后進行的頁面設計美化工作。</p> <h2>JAVA</h2> <p>Java是一種可以撰寫跨平台應用程序的面向對象的程序設計語言。</p> <h2>iOS</h2> <p>iOS是由蘋果公司開發的移動操作系統。</p> <h2>PHP</h2> <p>PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本預處理器”）是一種通用開源腳本語言。</p> </body> </html>
結果：
