一季惩、選擇器 相對(duì)于父元素的結(jié)構(gòu)偽類
1 不限制類型
E:first-child:查找E元素的父級(jí)元素中的第一個(gè)子元素。在查找的時(shí)候并不會(huì)限制查找的元素的類型 腻格。
E:first-child{} 查找E這個(gè)元素的父元素的第一個(gè)子元素
E:last-child{} 最后一個(gè)子元素
E:nth-child(n){}第n個(gè)子元素(索引從1開始)画拾，計(jì)算方法是E元素的全部兄弟元素
- demo1 里的例子 與demo2對(duì)比
這個(gè)例子里 無限制查找索引從1開始
無限制類型查找lili的父元素ul的子元素的第一個(gè)元素 找的就會(huì)是div
但是樣式不起作用 因?yàn)橹粫?huì)對(duì)li起作用
這個(gè)first就從ul結(jié)構(gòu)內(nèi)的第一個(gè)子元素開始算div就算是first
<style>
ul {
width: 280px;
margin: 0 auto;
}
li {
list-style: none;
float: left;
width: 60px;
height: 60px;
border: 1px solid #ccc;
margin-right: 10px;
margin-top: 10px;
text-align: center;
line-height: 60px;
}
/*沒有限制類型 找li的父元素ul的子元素的第一個(gè)元素 找的就會(huì)是div 但是給了樣式無效 因?yàn)檎也坏絣i 這個(gè)first就從ul結(jié)構(gòu)內(nèi)的第一個(gè)子元素開始算div就算是first */
li:first-child {
width: 60px;
height: 60px;
border: 1px solid black;
background-color: pink;
}
</style>
<body>
<ul>
<div>0</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
無限制類型選取父元素子元素中的第一個(gè)是div 所以樣式不起作用
- demo1.2 li:nth-child(n) 無限制正著排序 索引從1開始
/*無限制類型 從li的父元素ul的子元素中找第二個(gè) 第二個(gè)元素剛好是第一個(gè)li所以樣式生效*/
<style>
li:nth-child(2) {
background-color: hotpink;
}
</style>
<body>
<ul>
<div>0</div>
<li>1p h</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
無限制類型選取父元素第二個(gè)子元素 選取到第一個(gè)li所以樣式起作用
- demo1.3 li:nth-last-child(n) 無限制倒著排序 索引從1開始
/*無限制類型 從li的父元素ul的子元素中倒著數(shù)第二個(gè) 剛好也是li 樣式生效*/
<style>
li:nth-last-child(2) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<div>0</div>
<li>1p h</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
無限制類型找父元素的子元素倒著數(shù)第二個(gè) 剛好是li 樣式生效
-
demo1.4 無限制類型的奇數(shù)偶數(shù)選擇器
div開始是第一個(gè)first 所以偶數(shù)從li1開始
/*無限制類型從li的父元素的子元中的偶數(shù)*/
<style>
li:nth-child(even) {
background-color: orange;
}
/*無限制類型從li的父元素的子元中的奇數(shù)*/
li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>0</div>
<li>1p h</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
因?yàn)橛袀€(gè)div 所以奇數(shù)從div開始
2 限制類型
E:first-of-type{}
E:last-of-type{} 發(fā)
E:nth-of-type(n){} 指定類型 索引從1開始
-
demo2.1 有限制選擇第一個(gè)子元素li li:first-of-type
這個(gè)例子里 有限制類型查找 找li的父元素ul的子元素li中的第一個(gè)li 此時(shí)first從子元素li中找第一個(gè) 同時(shí)限制是li 所以樣式會(huì)起作用
<style>
ul {
width: 280px;
margin: 0 auto;
}
li {
list-style: none;
float: left;
width: 60px;
height: 60px;
border: 1px solid #ccc;
margin-right: 10px;
margin-top: 10px;
text-align: center;
line-height: 60px;
}
/*沒有限制類型 從li的父元素ul開始找第一個(gè)子元素 找的就會(huì)是0號(hào)div 但是給的樣式無效 */
li:first-child {
background-color: pink;
}
/*有限制類型 從li的父元素ul開始找第一個(gè)li元素 找的就會(huì)是1號(hào)li*/
li:first-of-type {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>0</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
有限制類型.png
-
大demo 有限制類型選擇元素 與無限制類型選擇元素 對(duì)比
a)demo 無類型限制選擇器li:nth-child(even);li:nth-child(odd)
計(jì)數(shù)從 ul的所有子元素開始計(jì)數(shù) 索引從1開始 如圖所示 樣式只jia在li上
<style>
/*ul li 樣式同上*/
div {
float: left;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
margin-right: 10px;
margin-top: 10px;
border: 1px solid pink;
}
/*無限制類型從li的父元素的子元中的偶數(shù)*/
li:nth-child(even) {
background-color: orange;
}
/*無限制類型從li的父元素的子元中的奇數(shù)*/
li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>00</div>
<li>1p h</li>
<li>2</li>
<div>11</div>
<li>3</li>
<li>4</li>
<div>22</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
無限制類型選擇器 所有的子元素 索引從第一個(gè)子元素開始 樣式只加在li上
b) demo 有類型限制選擇器
li:nth-of-type(even); li:nth-of-type(odd)從li的父元素ul中選擇子元素li 以第一個(gè)li為first 索引從1開始
/*有限制類型從li的父元素的子元中的偶數(shù)*/
<style>
li:nth-of-type(even) {
background-color: orange;
}
/*有限制類型從li的父元素的子元中的奇數(shù)*/
li:nth-of-type(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>00</div>
<li>1p h</li>
<li>2</li>
<div>11</div>
<li>3</li>
<li>4</li>
<div>22</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
有限制類型選擇器 所有的子元素 索引從li開始數(shù) 從1開始
1.3 其他無限制類型選擇器（上面demo有舉例）
E:nth-last-child(n): 同 E:nth-child(n) 相似，只是倒著計(jì)算
E:nth-child(even) 所有的偶數(shù)
E:nth-child(odd) 所有的奇數(shù)
3 為前五個(gè)后五個(gè)添加樣式
n:默認(rèn)取值范圍為0~子元素的長度.但是當(dāng)n<=0時(shí)菜职，選取無效
- li:nth-last-of-type(-n+4) 后四個(gè)
- li:nth-of-type(-n+4) 頭四個(gè)
<style>
/*后4個(gè)*/
li:nth-last-of-type(-n+4) {
font-size: 10px;
}
/*頭五個(gè)12345*/
li:nth-of-type(-n+5) {
font-size: 30px;
}
/*空值:沒有任何的內(nèi)容青抛，連空格都沒有*/
li:empty {
background-color: red;
}
</style>
</head>
<body>
<ul>
<div>00</div>
<li>1p h</li>
<li>2</li>
<div>11</div>
<li>3</li>
<li>4</li>
<div>22</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
頭5個(gè)后4個(gè)
- demo 錨點(diǎn) E:target 結(jié)合錨點(diǎn)進(jìn)行使用，處于當(dāng)前錨點(diǎn)的元素會(huì)被選中
li:target {
background-color: yellow;
}
image.png
image.png
4 總結(jié) 選擇器
b) 以某元素相對(duì)于其父元素或兄弟元素的位置來獲取無素的結(jié)構(gòu)偽類
f) E:first-child:查找E這個(gè)元素的父元素的第一個(gè)子元素
g) E:last-child:最后一個(gè)子元素
h) E:nth-child(n): 第n個(gè)子元素酬核，計(jì)算方法是E元素的全部兄弟元素
i) E:nth-last-child(n): 同E:nth-child(n) 相似脂凶，只是倒著計(jì)算
j) E:nth-child(even): 所有的偶數(shù)
k) E:nth-child(odd): 所有的奇數(shù)
l) E:nth-of-type(n):指定類型
m) E:empty 選中沒有任何子節(jié)點(diǎn)的E元素，注意愁茁，空格也算子元素
n) E:target 結(jié)合錨點(diǎn)進(jìn)行使用蚕钦，處于當(dāng)前錨點(diǎn)的元素會(huì)被選中
o) 重點(diǎn)說明：n遵循線性變化，其取值0鹅很、1嘶居、2、3促煮、4邮屁、... 但是當(dāng)n<=0時(shí)，選取無效
