第2節.結構性偽類選擇器
在學習結構性偽類選擇器之前，先了解2個概念：scss中的偽類選擇器&偽元素
偽類選擇器：css中已經定義好的選擇器,不能隨便取名
常用的偽類選擇器是使用在a元素上的幾種，如a:link|a:visited|a:hover|a:active
偽元素選擇器：並不是針對真正的元素使用的選擇器，而是針對css中已經定義好的偽元素使用的選擇器
css中有如下四種偽元素選擇器：
·first-line:為某個元素的第一行文字使用樣式；
·first-letter:為某個元素中的文字的首字母或第乙個字使用樣式；
·before:在某個元素之前插入一些內容；
·after: 在某個元素之後插入一些內容；
使用方法：選擇器：偽元素
例如：p:first-line//下面提到的選擇器使用方法類似
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頁面中就是指包含著整個頁面的部分
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表示指定的樣式在迴圈中所在的位置；
如下**：
前面所講的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：(按照以前所學的)
方法1：可用only-child代替**1
方法2：也可用only-of-type代替**1
css3結構性偽類選擇器 target
target選擇器稱為目標選擇器，用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。html content for brand css menusection target 演示結果 分析 1 具體來說，觸發元素的url中的標誌符通常會包含乙個 號，後面帶有乙個標...
css3結構性偽類選擇器 last child
last child 選擇器與 first child 選擇器作用類似，不同的是 last child 選擇器選擇的是元素的最後乙個子元素。例如，需要改變的是列表中的最後乙個 li 的背景色，就可以使用這個選擇器，ul li last child 示例演示 在部落格的排版中，每個段落都有15px的m...
CSS3 結構性偽類選擇器 target
target選擇器稱為目標選擇器，用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。示例展示 點選鏈結顯示隱藏的段落。html id brand content for brand css menusection target 演示結果 分析 1 具體來說，觸發元素...