第2節.結構性偽類選擇器
在學習結構性偽類選擇器之前，先了解2個概念：sCSS中的偽類選擇器&偽元素
偽類選擇器：CSS中已經定義好的選擇器,不能隨便取名
常用的偽類選擇器是使用在a元素上的幾種，如a:link|a:visited|a:hover|a:active
偽元素選擇器：並不是針對真正的元素使用的選擇器，而是針對CSS中已經定義好的偽元素使用的選擇器
CSS中有如下四種偽元素選擇器：
· first-line:為某個元素的第一行文字使用樣式；
· first-letter:為某個元素中的文字的首字母或第一個字使用樣式；
· before:在某個元素之前插入一些內容；
· after: 在某個元素之后插入一些內容；
使用方法：選擇器：偽元素{樣式}
例如：p:first-line{ color:#ff0000;} //下面提到的選擇器使用方法類似
OK，下面進入正題
-------------------------------------------------------------------------------------------------------------------
結構性偽類選擇器
·PartI : 四個最基本的：root、not、empty、target
·PartII : first-child、last-child、nth-child、nth-last-child、
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
·PartIII: nth-of-type、nth-last-of-type
·PartIV : 循環使用樣式
·PartV : only-child
下面依次介紹：
-------------------------------------------------------------------------------------------------------------------
PartI 四個最基本的結構性偽類選擇器
root:將樣式綁定到頁面的根元素中。
所謂根元素，是指位於文檔樹中最頂層結構的元素，在HTML頁面中就是指包含着整個頁面的<html>部分
not: 想對某個結構元素使用樣式，但想排除這個結構元素下的子結構元素，就是用not樣式
empty:指定當元素內容為空白時使用的樣式
target:對頁面中某個target元素指定樣式，該樣式只在用戶點擊了頁面中的鏈接，並且跳轉到target元素后生效
-------------------------------------------------------------------------------------------------------------------
PartII
1.單獨指定第一個子元素、最后一個子元素的樣式[2個]
·first-child:對一個父元素中的第一個子元素指定樣式 如p:first-child{}--第一個P元素的樣式
·last-child: 對一個父元素中的最后一個子元素指定樣式 如 p:last-chidl{}--倒數第一個P元素的樣式
2.對指定序號的子元素使用樣式[2個]
·nth-child: 對指定序號的子元素設置樣式(正數) 如p:nth-child(2){}--第2個P元素的樣式
·nth-last-child:對指定序號的子元素設置樣式(倒數) 如p:nth-last-child(2){}--倒數第2個P元素的樣式
3.對所有第奇數個子元素或第偶數個子元素指定樣式[4個]
·nth-child(odd): 所有正數下來第偶數個子元素
·nth-child(even):所有正數下來第奇數個子元素
·nth-last-child(odd): 所有倒數上去第偶數個子元素
·nth-last-child(even):所有倒數上去第奇數個子元素
-------------------------------------------------------------------------------------------------------------------
PartIII
nth-of-type:
nth-last-of-type:
-------------------------------------------------------------------------------------------------------------------
PartIV 循環使用樣式
nth-child(n) 把參數n改成可循環的an+b的形式
a表示每次循環中共包括幾張樣式； b表示指定的樣式在循環中所在的位置；
如下代碼：
<style>
li:nth-child(4n+1){background-color:yellow;} //第一個li背景色為 黃色，這樣依次循環下去
li:nth-child(4n+2){background-color:bule;} //第二個li背景色為 藍色......
li:nth-child(4n+3){background-color:red;} //第三個li背景色為 紅色......
li:nth-child(4n+4){background-color:green;} //第四個li背景色為 綠色......
//4n+4可縮寫為4n
</style>
前面所講的nth-child(odd)&nth-child(even)可以用如下代碼替代：
nth-child(2n+1){樣式} //所有正數下來的第奇數個子元素
nth-child(2n+2){樣式} //..............第偶數........
nth-last-child(2n+1){樣式} //所有倒數上去的第奇數個子元素
nth-last-child(2n+2){樣式} //..............第偶數........
-------------------------------------------------------------------------------------------------------------------
PartV only-child選擇器
only-child:當某個父元素中只有一個子元素時使用的樣式
如下樣式 代碼1：(按照以前所學的)
<style>li：nth-child(1):nth-last-child(1){ background-color:yellow} </style>
方法1：可用only-child代替代碼1
<style> li：only-child{ background-color:yellow} </style>
方法2：也可用only-of-type代替代碼1
<style> li：only-of-type{ background-color:yellow} </style>