1、e:nth-child(n):匹配元素型別為e且是父元素的第n個子元素
......23
45
2、e:first-child:匹配元素型別為e且是父元素的第乙個子元素
3、e:last-child:匹配元素型別為e且是父元素的最後乙個子元素
4、e > f e元素下面第一層子集
5、e ~ f e元素後面的兄弟元素
6、e + f 緊挨著的後面的兄弟元素
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
type
="text/css"
>
/* 匹配第二個型別是div子元素 */
.con div:nth-child(2)
.con div:nth-child(3)
/* .list li:nth-child(1)
等同於下面的寫法:
*/.list li:first-child
/* .list li:nth-child(8)
等同於下面的寫法:
*/.list li:last-child
/*
2n:偶數行;
2n+1:奇數行;
*/.list2 li:nth-child(2n+1)
style
>
head
>
>
class
="con"
>
>
標題h3
>
>
這是乙個divdiv
>
>
這是第二個divdiv
>
div>
class
="list"
>
>
1li>
>
2li>
>
3li>
>
4li>
>
5li>
>
6li>
>
7li>
>
8li>
ul>
class
="list2"
>
>
1li>
>
2li>
>
3li>
>
4li>
>
5li>
>
6li>
>
7li>
>
8li>
ul>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
type
="text/css"
>
.box > div
.box2 .title2
.box2 .title2 ~ p
.box2 .title2 + p
.box2 .title1 + p
style
>
head
>
>
class
="box"
>
>
>
這是div裡面的文字div
>
div>
div>
class
="box2"
>
class
="title1"
>
這是標題一h3
>
>
這是段落一p
>
class
="title2"
>
這是標題二h3
>
>
這是段落二p
>
>
這是段落二二p
>
>
這是標題三h3
>
>
這是段落**
>
div>
body
>
html
>
屬性選擇器:
1、e[attr] 含有attr屬性的元素
......
這是乙個div元素
2、e[attr=『ok』] 含有attr屬性的元素且它的值為「ok」
3、e[attr^=『ok』] 含有attr屬性的元素且它的值的開頭含有「ok」
4、e[attr$=『ok』] 含有attr屬性的元素且它的值的結尾含有「ok」
5、e[attr*=『ok』] 含有attr屬性的元素且它的值中含有「ok」
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
type
="text/css"
>
/* 匹配所有有class屬性的div */
.con div[class]
/* 匹配class屬性值是ok的div */
.con div[class="ok"]
/* 匹配class屬性值是「ok」開頭的div */
.con div[class^="ok"]
/* 匹配class屬性值是「ok」結尾的div */
.con div[class$="ok"]
/* 匹配class屬性值含有「ok」的div */
.con div[class*="ok"]
style
>
head
>
>
class
="con"
>
class
="ok"
>
1div
>
class
="okabc"
>
2div
>
class
="abcok"
>
3div
>
class
="abcok123"
>
4div
>
>
5div
>
div>
body
>
html
>
CSS3 新增選擇器
新增選擇器 用法描述 element1 element2 p u選擇在同乙個父級元素下的p後面的所有的ul 選擇其 src 屬性值以 https 開頭的每個a元素 attribute value a src pdf 選擇其 src 屬性以 pdf 結尾的所有a元素 attribute value a...
css3新增選擇器
1.屬性選擇器 1 e att 元素 屬性 選擇具有att屬性的e元素,需要選擇有某個屬性的元素,而不論是行為是什麼,可以使用簡單的屬性選擇器 注 可以根據多個屬性進行選擇,只需要將屬性選擇器連線即可。2 e att val 元素 屬性 屬性值 選擇具有att屬性且屬性值為val的e元素,進一步縮小...
css3新增選擇器
屬性選擇器 1.dom attr 帶有attr的屬性會被選擇 2.dom attr value 帶有attr的屬性,並且值為value的元素會被選擇 3.dom attr value 帶有attr的屬性,並且值當中只要包含完整的value單詞,就會被選擇 4.dom attr value 帶有att...