#大有學問#
定義
結構僞類選擇器是指根據文檔結構來選擇目标元素。
常用于篩選父級選擇器的子元素。
分類
結構僞類選擇器可分為兩種：
第一種：将父元素中所有子元素按照文檔結構統一進行排序，并按照此元素總數序号進行确定目标元素。
舉個例子：在一間教室中有10個學生，不分男女，按照座位前後進行排序。則序号就是1-10。
HTML代碼結構統一
<div>
<p>子元素1</p>
<div>子元素2</div>
<p>子元素3</p>
<div>子元素4</div>
<p>子元素5</p>
<div>子元素6</div>
</div> - :first-child 父元素中第一個子元素
文法
父元素 子元素标簽名:first-child {} 代碼練習
div p:first-child {
color: purple;
} 
- :last-child 父元素中最後一個子元素
文法
父元素 子元素标簽名:last-child {} 代碼練習
div div:last-child {
color: blue;
} 
- :nth-child(n) 父元素中自行指定子元素
n的值都是按照子元素總體數量統一排序。
其中n不僅僅可以是一個數字，還可以是even偶數、odd奇數、公式n。
文法
父元素 子元素标簽名:nth-child(n) {} 當n為數字序号的代碼練習
div p:nth-child(3) {
background-color: red;
}
div div:nth-child(4) {
background-color: aquamarine;
}
div p:nth-child(5) {
background-color: pink;
}
div div:nth-child(6) {
background-color: brown;
} 新的統一HTML結構代碼
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul> 當n為even偶數的代碼練習
ul li:nth-child(even) {
color: red;
} 當n為odd奇數的代碼練習
ul li:nth-child(odd) {
color: blue;
} 當n為公式的代碼練習
2n=even偶數；
2n+1=odd奇數；
5n：5的倍數
n+5：從第五個子元素（包含）開始至最後一個子元素；
-n+5：前五個子元素，包含第五個子元素
時間有限，有興趣的可以自己練習。
第二種：将父元素中子元素按照标簽類型進行分類，之後在各類型标簽數量中分别排序，且使用時排序序号與标簽類型需要一緻。
還是舉個例子：在一間教室中有10個學生，按照性别類型分類排序，男生排序1-5，女生排序1-5。
HTML代碼結構統一
<section>
<p>子元素1</p>
<div>子元素2</div>
<p>子元素3</p>
<div>子元素4</div>
<p>子元素5</p>
<div>子元素6</div>
</section> - 父元素中第一個子元素
文法
父元素 子元素标簽名:first-of-type {} 代碼練習
/* first-of-type:某一類型标簽中的第一個标簽 */
section p:first-of-type {
color: red;
}
section div:first-of-type {
color: blue;
} - 父元素中最後一個子元素
文法
父元素 子元素标簽名:last-of-type {} 代碼練習
section p:last-of-type {
color: pink;
}
section div:last-of-type {
color: purple;
} - 父元素中自行指定子元素
和nth-child(n)一樣，n不僅僅可以是一個數字，還可以是even偶數、odd奇數、公式n。
文法
父元素 子元素标簽名:nth-of-type {} 代碼練習
section p:nth-of-type(2) {
background-color: antiquewhite;
}
section div:nth-of-type(2) {
background-color: red;
} 這兩種方式不同寫法，差點給我繞暈了。
下篇文章再寫僞元素選擇器。
今天就到這裡，拜~