課程
/前端開發(fā)
/HTML/CSS
/十天精通CSS3
和.wrapper>p:first-child 有什么區(qū)別嗎
2018-05-07
源自：十天精通CSS3 6-10
正在回答
首先,第一個(gè)子元素,你可以理解為大兒子.??
.wrapper>p:first-child? ? .wrapper的大兒子必須是p, 不然你將什么都選擇不到.如果大兒子是P,你選擇的就是這個(gè)p了.
.wrapper>p:first-of-type? ?所有p兒子中第一個(gè)p就行了,不用管他是不是大兒子.
這兩個(gè)選擇器針對是子元素,不是后代元素.所以什么孫子P,曾孫子P,曾曾孫子P都不考慮在里面.
p：first-child
如果想選中，則p必須為第一個(gè)子元素。否則無法匹配
p:first-of-type{}
無論p在父節(jié)點(diǎn)中的哪個(gè)位置，總能選中第一個(gè)p元素
當(dāng)子元素就一種：比如都是p時(shí)，使用.wrapper>p:first-child（實(shí)驗(yàn)了一下這種情況下使用.wrapper>p:first-of-? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?type也是可以的）
當(dāng)子元素有多種：比如有p，div等時(shí)，使用.wrapper>p:first-of-type
詳細(xì)看這篇文章的解釋
https://www.cnblogs.com/2050/p/3569509.html
.wrapper>p:first-child 指的是.wrapper的子元素p，并且要求這個(gè)p是.wrapper的第一個(gè)子元素；
.wrapper>p:first-of-type 指的是.wrapper的后代元素中的第一個(gè)p元素。
我把原先題目的代碼做了點(diǎn)修改，把第一個(gè)p元素放在div里面，
<div class="wrapper">
? <div>
? ? ? <p>我是第一個(gè)段落</p>
? </div>
? <p>我是第二個(gè)段落</p>
? <div>我是第一個(gè)Div元素</div>
? <div>我是第二個(gè)Div元素</div>
? <p>我是第三個(gè)段落</p>
? <p>我是第四個(gè)段落</p>
</div>
這個(gè)時(shí)候，此p為最外層div的孫子，所以.wrapper>p:first-child查不到對應(yīng)的元素；但此p為最外層div底下的第一個(gè)p類型，所以.wrapper>p:first-of-type對應(yīng)的就是這個(gè)p元素。
編程小蘿卜
就是在p標(biāo)簽內(nèi)的第一個(gè)元素，
是.wrapper中第一個(gè)p元素，比如盡管<div class=.wrapper>
<div>111</div>
<div>222</div>
<p>我是被選中的</p>
<div>33</div>
<p></p>
舉報(bào)
本課程為CSS3入門教程，深刻詳解CSS3知識讓網(wǎng)頁穿上絢麗裝備
4 回答nth-child()和nth-of-type()的區(qū)別
1 回答.wrapper>div:后面沒填為什么會影響到.wrapper>p:nth-of-type(2n)
1 回答.wrapper > div:nth-last-of-type(5){ background: orange; }
1 回答nth-child（）和nth-of-type()差別是什么
2 回答為何改為.wrapper > div:last-child{ background: orange; }不行？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2019-12-16
首先,第一個(gè)子元素,你可以理解為大兒子.??
.wrapper>p:first-child? ? .wrapper的大兒子必須是p, 不然你將什么都選擇不到.如果大兒子是P,你選擇的就是這個(gè)p了.
.wrapper>p:first-of-type? ?所有p兒子中第一個(gè)p就行了,不用管他是不是大兒子.
這兩個(gè)選擇器針對是子元素,不是后代元素.所以什么孫子P,曾孫子P,曾曾孫子P都不考慮在里面.
2019-12-05
p：first-child
如果想選中，則p必須為第一個(gè)子元素。否則無法匹配
p:first-of-type{}
無論p在父節(jié)點(diǎn)中的哪個(gè)位置，總能選中第一個(gè)p元素
2018-10-05
當(dāng)子元素就一種：比如都是p時(shí)，使用.wrapper>p:first-child（實(shí)驗(yàn)了一下這種情況下使用.wrapper>p:first-of-? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?type也是可以的）
當(dāng)子元素有多種：比如有p，div等時(shí)，使用.wrapper>p:first-of-type
2018-08-13
詳細(xì)看這篇文章的解釋
https://www.cnblogs.com/2050/p/3569509.html
2018-05-15
.wrapper>p:first-child 指的是.wrapper的子元素p，并且要求這個(gè)p是.wrapper的第一個(gè)子元素；
.wrapper>p:first-of-type 指的是.wrapper的后代元素中的第一個(gè)p元素。
我把原先題目的代碼做了點(diǎn)修改，把第一個(gè)p元素放在div里面，
<div class="wrapper">
? <div>
? ? ? <p>我是第一個(gè)段落</p>
? </div>
? <p>我是第二個(gè)段落</p>
? <div>我是第一個(gè)Div元素</div>
? <div>我是第二個(gè)Div元素</div>
? <p>我是第三個(gè)段落</p>
? <p>我是第四個(gè)段落</p>
</div>
這個(gè)時(shí)候，此p為最外層div的孫子，所以.wrapper>p:first-child查不到對應(yīng)的元素；但此p為最外層div底下的第一個(gè)p類型，所以.wrapper>p:first-of-type對應(yīng)的就是這個(gè)p元素。
2018-05-07
.wrapper>p:first-child
就是在p標(biāo)簽內(nèi)的第一個(gè)元素，
.wrapper>p:first-of-type
是.wrapper中第一個(gè)p元素，比如盡管<div class=.wrapper>
<div>111</div>
<div>222</div>
<p>我是被選中的</p>
<div>33</div>
<p></p>
</div>