1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>title
title
>
6<
style
>
7.red
10.green
13.blue
1617
/*屬性選擇器的使用
*/18
/*需求：獲取所有擁有class屬性的元素，將字型大小修改
*/19
/*e[attr]:獲取擁有指定attr屬性的e元素,當前的屬性名稱是嚴格匹配
*/20
/*li[class]
*/23
/*查詢擁有指定屬性和屬性值的指定名稱的元素
*/24
/*e[attr=value]:li[class=red]:說明我想查詢擁有class屬性並且屬性值為red的li元素
*/25
/*li[class=red]
*/28
/*查詢擁有指定屬性，並且屬性值以指定字元開頭的指定名稱的元素
*/29
/*li[class^=red]:查詢擁有class屬性，並且屬性值以red開頭的li元素
*/30
/*li[class^=red]
*/33
li[class$=blue]
36style
>
37head
>
38<
body
>
39<
ol>
40<
li class
="red"
>河南再次發生礦難，死傷人數超過100
li>
41<
li class
="redcolor"
>禽流感次發生蔓延，***指示
li>
42<
li class
="green"
>南方農作物減產絕收面積上畝
li>
43<
li class
="darkblue"
>豬流感在廣減產絕收發
li>
44<
li class
="blue"
>全國多作物減產絕收面積上畝
li>
45<
li>豬流感在廣東群體性暴發
li>
46ol
>
47body
>
48html
>
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>title
title
>
6<
style
>
7.red
10/*
下面這句樣式的意思是：查詢擁有.red樣式的元素的兄弟p元素,只能查詢下乙個.查詢只能往下查詢
*/11
/*.red + p
*/14
/*下面這句樣式的意思是：查詢擁有.red樣式的元素的兄弟p元素，能查詢到所有的兄弟元素.查詢只能往下查詢
*/15
.red ~ p
18style
>
19head
>
20<
body
>
21<
p>p1p1p1p1pp1
p>
22<
p class
="red"
>p1p1p1p1pp1
p>
23<
span
>能不能變色
span
>
24<
p>p1p1p1p1pp1
p>
25<
p>p1p1p1p1pp1
p>
26body
>
27html
>
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>選擇器 - 相對父元素的偽類
title
>
6<
style
>7*
11ul
20ul > li
31/*
獲取第乙個li元素，設定背景
*/32
/*first-child:查詢第乙個子元素。相對於它的父容器
*/33
/*li:first-child
*/36
/*查詢第乙個指定型別的子元素，相對于父容器
*/37
/*li:first-of-type
*/40
/*li:last-of-type
*/43
44/*
查詢第5個li元素
*/45
/*li:nth-child(5)
*/48
/*li:nth-of-type(5)
*/51
52/*
li:nth-of-type(odd)
55li:nth-of-type(even)
*/58
59/*
n取值是從0到子元素的長度。如果<=0，則失效
*/60
/*li:nth-of-type(2n-1)
*/63
64/*
獲取前5個li元素
*/65
/*5-0 5-1 5-2 5-3 5-4 5-5
665 4 3 2 1
*/67
li:nth-of-type(-n + 5)
70li:nth-last-of-type(-n + 5)
73style
>
74head
>
75<
body
>
76<
ul>
77<
li>1
li>
78<
li>2
li>
79<
li>3
li>
80<
li>4
li>
81<
li>5
li>
82<
li>6
li>
83<
li>7
li>
84<
li>8
li>
85<
li>9
li>
86<
li>10
li>
87<
li>11
li>
88<
li>12
li>
89<
li>13
li>
90<
li>14
li>
91<
li>15
li>
92<
li>16
li>
93<
li>17
li>
94<
li>18
li>
95<
li>19
li>
96<
li>20
li>
97<
li>21
li>
98<
li>22
li>
99<
li>23
li>
100<
li>24
li>
101<
li>25
li>
102<
li>26
li>
103<
li>27
li>
104<
li>28
li>
105<
li>29
li>
106<
li>30
li>
107<
li>31
li>
108<
li>32
li>
109<
li>33
li>
110<
li>34
li>
111<
li>35
li>
112ul
>
113body
>
114html
>
偽元素選擇器 屬性選擇器 兄弟元素選擇器
一 偽元素 使用偽元素來表示元素中的一些特殊位置 常用 1 first letter 為元素中的第乙個位置設定樣式 2 first line 為元素中的第一行位置設定樣式 3 before 為元素最前邊的部分設定樣式 一般before都需要結合屬性content樣式一起使用 通過content可以向...
屬性，兄弟，偽類選擇器
屬性選擇器 屬性是相對於標籤而言。所謂屬性選擇器就是根據指定名稱的屬性的值來查詢元素 1.e attr 查詢指定的擁有attr屬性的e標籤。如查詢擁有style屬性的li標籤 li style 2.e attr value 查詢擁有指定的attr屬性並且屬性值為value的e標籤。如想查詢擁有cla...
屬性選擇器，偽類選擇器，偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...