資訊專欄INFORMATION COLUMN
摘要：選擇器是中定義的選擇器，從字面意思上來看也很好理解，就是第一個(gè)子元素。這里有兩個(gè)為的子元素，匹配到的是第一個(gè)。同樣類型的選擇器和和也可以這樣去理解。文章乃參考轉(zhuǎn)載其他博客所得，僅供自己學(xué)習(xí)作筆記使用
:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個(gè)子元素。比如有段代碼：
1 <div>
2 <p>第一個(gè)子元素p>
3 <h1>第二個(gè)子元素h1>
4 <span>第三個(gè)子元素span>
5 <span>第四個(gè)子元素span>
6 div>
?
p:first-child? 匹配到的是p元素,因?yàn)閜元素是div的第一個(gè)子元素；
h1:first-child? 匹配不到任何元素，因?yàn)樵谶@里h1是div的第二個(gè)子元素，而不是第一個(gè)；
span:first-child? 匹配不到任何元素，因?yàn)樵谶@里兩個(gè)span元素都不是div的第一個(gè)子元素；
:first-child? 匹配到的是p元素,因?yàn)樵谶@里div的第一個(gè)子元素就是p。
?
然后，在css3中又定義了:first-of-type這個(gè)選擇器，這個(gè)跟:first-child有什么區(qū)別呢？還是看那段代碼：
1 <div>
2 <p>第一個(gè)子元素p>
3 <h1>第二個(gè)子元素h1>
4 <span>第三個(gè)子元素span>
5 <span>第四個(gè)子元素span>
6 div>
?
p:first-of-type? 匹配到的是p元素,因?yàn)閜是div的所有為p的子元素中的第一個(gè)，事實(shí)上這里也只有一個(gè)為p的子元素；
h1:first-of-type? 匹配到的是h1元素，因?yàn)閔1是div的所有為h1的子元素中的第一個(gè)，事實(shí)上這里也只有一個(gè)為h1的子元素；
span:first-of-type? 匹配到的是第三個(gè)子元素span。這里div有兩個(gè)為span的子元素，匹配到的是第一個(gè)。
:first-of-type? 匹配到的是p元素
?
所以，通過以上兩個(gè)例子可以得出結(jié)論：
:first-child 匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素。
:first-of-type 匹配的是該類型的第一個(gè)，類型是指什么呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了，當(dāng)然這些元素的范圍都是屬于同一級的，也就是同輩的。
同樣類型的選擇器 :last-child? 和 :last-of-type、:nth-child(n)? 和? :nth-of-type(n) 也可以這樣去理解。
文章乃參考、轉(zhuǎn)載其他博客所得，僅供自己學(xué)習(xí)作筆記使用?。?！文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1337.html
摘要：，，層疊樣式表，請留意層疊概念。為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:targ...
摘要：偽元素用于將特殊的效果添加到某些選擇器。因此，偽類與偽元素的區(qū)別在于有沒有創(chuàng)建一個(gè)文檔樹之外的元素。偽類代表了一組兄弟元素中的第一個(gè)元素。偽類的實(shí)質(zhì)就是把某種幻想類關(guān)聯(lián)到某種偽類相關(guān)的元素中。 在css2中是這樣定義二者的： CSS 偽類用于向某些選擇器添加特殊的效果。CSS 偽元素用于將特殊的效果添加到某些選擇器。 偽類存在的意義是為了通過選擇器找到那些不存在DOM樹中的信息以及不...
摘要：偽類和偽元素，對于絕大多數(shù)同學(xué)來說，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間的區(qū)別，以致于混淆概念。除了上面這個(gè)本質(zhì)區(qū)別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數(shù)同學(xué)來說，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間...
摘要：必須要準(zhǔn)確的放置否則聲明無效。倒影設(shè)置元素的倒影準(zhǔn)確的來說不能算是的東西，但需要知道。默認(rèn)值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時(shí)間減小帶寬占用。 CSS3主要內(nèi)容 一、CSS選擇器 ? CSS3選擇器規(guī)范地址： https://www.w3.org/TR/2011/RE...? ...
閱讀 3170·2021-09-08 10:43
閱讀 1096·2019-08-30 15:53
閱讀 1096·2019-08-30 13:51
閱讀 925·2019-08-29 14:03
閱讀 876·2019-08-26 18:35
閱讀 1294·2019-08-26 13:38
閱讀 1677·2019-08-26 10:34
閱讀 3578·2019-08-26 10:21
