CSS3学习笔记1：结构性伪类选择器
第2節(jié).結(jié)構(gòu)性偽類選擇器
在學(xué)習(xí)結(jié)構(gòu)性偽類選擇器之前，先了解2個(gè)概念：sCSS中的偽類選擇器&偽元素
偽類選擇器：CSS中已經(jīng)定義好的選擇器,不能隨便取名???????????
??????常用的偽類選擇器是使用在a元素上的幾種，如a:link|a:visited|a:hover|a:active
偽元素選擇器：并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器
??????CSS中有如下四種偽元素選擇器：
???????·? first-line:為某個(gè)元素的第一行文字使用樣式；
???????·? first-letter:為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式；
???????·? before:在某個(gè)元素之前插入一些內(nèi)容；
???????·? after: 在某個(gè)元素之后插入一些內(nèi)容；
????? 使用方法：選擇器：偽元素{樣式}
???????????????????? 例如：p:first-line{ color:#ff0000;}??//下面提到的選擇器使用方法類似
OK，下面進(jìn)入正題
-------------------------------------------------------------------------------------------------------------------
結(jié)構(gòu)性偽類選擇器????
????? ·PartI? : 四個(gè)最基本的：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 : 循環(huán)使用樣式 ???
??????·PartV? : only-child
下面依次介紹：
-------------------------------------------------------------------------------------------------------------------
PartI 四個(gè)最基本的結(jié)構(gòu)性偽類選擇器
????? root:將樣式綁定到頁(yè)面的根元素中。 ????
??????????? ? 所謂根元素，是指位于文檔樹中最頂層結(jié)構(gòu)的元素，在HTML頁(yè)面中就是指包含著整個(gè)頁(yè)面的<html>部分
????? not: 想對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但想排除這個(gè)結(jié)構(gòu)元素下的子結(jié)構(gòu)元素，就是用not樣式
????? empty:指定當(dāng)元素內(nèi)容為空白時(shí)使用的樣式
????? target:對(duì)頁(yè)面中某個(gè)target元素指定樣式，該樣式只在用戶點(diǎn)擊了頁(yè)面中的鏈接，并且跳轉(zhuǎn)到target元素后生效
-------------------------------------------------------------------------------------------------------------------
PartII
????? 1.單獨(dú)指定第一個(gè)子元素、最后一個(gè)子元素的樣式[2個(gè)]
????????? ·first-child:對(duì)一個(gè)父元素中的第一個(gè)子元素指定樣式 如p:first-child{}--第一個(gè)P元素的樣式 ?
????????? ·last-child: 對(duì)一個(gè)父元素中的最后一個(gè)子元素指定樣式 如 p:last-chidl{}--倒數(shù)第一個(gè)P元素的樣式
????? 2.對(duì)指定序號(hào)的子元素使用樣式[2個(gè)] ?
????????? ·nth-child:? 對(duì)指定序號(hào)的子元素設(shè)置樣式(正數(shù)) 如p:nth-child(2){}--第2個(gè)P元素的樣式 ?
????????? ·nth-last-child:對(duì)指定序號(hào)的子元素設(shè)置樣式(倒數(shù)) 如p:nth-last-child(2){}--倒數(shù)第2個(gè)P元素的樣式
????? 3.對(duì)所有第奇數(shù)個(gè)子元素或第偶數(shù)個(gè)子元素指定樣式[4個(gè)] ?
????????? ·nth-child(odd): 所有正數(shù)下來第偶數(shù)個(gè)子元素 ?
????????? ·nth-child(even):所有正數(shù)下來第奇數(shù)個(gè)子元素 ?
????????? ·nth-last-child(odd): 所有倒數(shù)上去第偶數(shù)個(gè)子元素 ?
??????????·nth-last-child(even):所有倒數(shù)上去第奇數(shù)個(gè)子元素
-------------------------------------------------------------------------------------------------------------------
PartIII
????? nth-of-type:
????? nth-last-of-type:
-------------------------------------------------------------------------------------------------------------------
PartIV 循環(huán)使用樣式
????? nth-child(n) 把參數(shù)n改成可循環(huán)的an+b的形式
??????????????????????? a表示每次循環(huán)中共包括幾張樣式； b表示指定的樣式在循環(huán)中所在的位置；
????? 如下代碼：
????? <style> ?
???????li:nth-child(4n+1){background-color:yellow;}? ?//第一個(gè)li背景色為 黃色，這樣依次循環(huán)下去
?????? li:nth-child(4n+2){background-color:bule;}???? ?//第二個(gè)li背景色為 藍(lán)色...... ?
?????? li:nth-child(4n+3){background-color:red;}?????? //第三個(gè)li背景色為 紅色...... ?
?????? li:nth-child(4n+4){background-color:green;}?? //第四個(gè)li背景色為 綠色...... ???????????
?????????????? ????????????????????????????????????????????????????????????? ? ?//4n+4可縮寫為4n
????? </style>
????? 前面所講的nth-child(odd)&nth-child(even)可以用如下代碼替代： ???
??????nth-child(2n+1){樣式}?????? //所有正數(shù)下來的第奇數(shù)個(gè)子元素 ???
????? nth-child(2n+2){樣式}????? ?//..............第偶數(shù)........ ???
????? nth-last-child(2n+1){樣式}???? //所有倒數(shù)上去的第奇數(shù)個(gè)子元素 ???
????? nth-last-child(2n+2){樣式}???? //..............第偶數(shù)........
-------------------------------------------------------------------------------------------------------------------
PartV only-child選擇器
????? only-child:當(dāng)某個(gè)父元素中只有一個(gè)子元素時(shí)使用的樣式
????? 如下樣式 代碼1：(按照以前所學(xué)的)
????????????????????? <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>
總結(jié)
以上是生活随笔為你收集整理的CSS3学习笔记1：结构性伪类选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css3学习 之 css选择器(结构性伪
- 下一篇： java GUI界面之JTable详解