亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

.wrapper>p:first-of-type和.wrapper>p:first-child 有什么區別嗎

和.wrapper>p:first-child 有什么區別嗎

正在回答

6 回答

首先,第一個子元素,你可以理解為大兒子.??

.wrapper>p:first-child? ? .wrapper的大兒子必須是p, 不然你將什么都選擇不到.如果大兒子是P,你選擇的就是這個p了.

.wrapper>p:first-of-type? ?所有p兒子中第一個p就行了,不用管他是不是大兒子.

這兩個選擇器針對是子元素,不是后代元素.所以什么孫子P,曾孫子P,曾曾孫子P都不考慮在里面.



0 回復 有任何疑惑可以回復我~

p：first-child

如果想選中，則p必須為第一個子元素。否則無法匹配

p:first-of-type{}

無論p在父節點中的哪個位置，總能選中第一個p元素

0 回復 有任何疑惑可以回復我~

當子元素就一種：比如都是p時，使用.wrapper>p:first-child（實驗了一下這種情況下使用.wrapper>p:first-of-? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?type也是可以的）

當子元素有多種：比如有p，div等時，使用.wrapper>p:first-of-type

0 回復 有任何疑惑可以回復我~

詳細看這篇文章的解釋

https://www.cnblogs.com/2050/p/3569509.html

6 回復 有任何疑惑可以回復我~

.wrapper>p:first-child 指的是.wrapper的子元素p，并且要求這個p是.wrapper的第一個子元素；

.wrapper>p:first-of-type 指的是.wrapper的后代元素中的第一個p元素。

我把原先題目的代碼做了點修改，把第一個p元素放在div里面，

<div class="wrapper">

? <div>

? ? ? <p>我是第一個段落</p>

? </div>

? <p>我是第二個段落</p>

? <div>我是第一個Div元素</div>

? <div>我是第二個Div元素</div>

? <p>我是第三個段落</p>

? <p>我是第四個段落</p>

</div>

這個時候，此p為最外層div的孫子，所以.wrapper>p:first-child查不到對應的元素；但此p為最外層div底下的第一個p類型，所以.wrapper>p:first-of-type對應的就是這個p元素。

0 回復 有任何疑惑可以回復我~
#1

編程小蘿卜

兄弟，你說的不對吧，第一個p段落（孫子元素）用.wrapper>p:first-of-type是檢測不到的，所以.wrapper>p:first-of-type對應的不是第一個p元素，而是第二個p元素，親測了，你可以試一下
2018-07-29 回復 有任何疑惑可以回復我~

.wrapper>p:first-child

就是在p標簽內的第一個元素，

.wrapper>p:first-of-type

是.wrapper中第一個p元素，比如盡管<div class=.wrapper>

<div>111</div>

<div>222</div>

<p>我是被選中的</p>

<div>33</div>

<p></p>

</div>


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

.wrapper>p:first-of-type和.wrapper>p:first-child 有什么區別嗎

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號