CSS3新增選擇器nth child等

2021-10-05 01:33:14 字數 3502 閱讀 4687

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...