CSS3学习笔记1：结构性伪类选择器
第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>
總結
以上是生活随笔為你收集整理的CSS3学习笔记1：结构性伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css3学习 之 css选择器(结构性伪
- 下一篇： java GUI界面之JTable详解