css選中父元素下的第一個(gè)子元素(:first-child)
我要評(píng)論前言
最近在項(xiàng)目中用到 :first-child 很容易的就想到了，嗯嗯。這不就是選擇第一個(gè)元素嗎？
好像很好用，平時(shí)使用中也沒(méi)有遇到什么問(wèn)題，理所當(dāng)然的就以為它只會(huì)選中父元素下的第一個(gè)元素，對(duì)孫元素和曾孫元素沒(méi)有影響。事實(shí)證明，我的理所當(dāng)然是錯(cuò)的。
E:first-child的第一個(gè)誤區(qū)（只會(huì)選中我規(guī)定的區(qū)域中的一個(gè)，不會(huì)遍歷其下有多少個(gè)孫或曾孫元素）
<!DOCTYPE html>
<html>
<head>
<style>
body p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>這個(gè)段落是其父元素（body）的首個(gè)子元素。</p>
<h1>歡迎訪問(wèn)我的主頁(yè)</h1>
<p>這個(gè)段落不是其父元素的首個(gè)子元素。</p>
<div>
<p>這個(gè)段落是其父元素（div）的首個(gè)子元素。</p>
<p>這個(gè)段落不是其父元素的首個(gè)子元素。</p>
</div>
<p><b>注釋：</b>對(duì)于 IE8 及更早版本的瀏覽器中的 :first-child，必須聲明 <!DOCTYPE>。</p>
</body>
</html>
上面的代碼真的是只會(huì)有一個(gè)p標(biāo)簽生效嗎？
這是后就已經(jīng)犯了我們常見(jiàn)的第一個(gè)誤區(qū)，認(rèn)為body p:first-child選中的就是第一個(gè)元素。
其實(shí)，只要在我們選中的body這一塊中，如果這個(gè)p在其父元素中屬于第一個(gè)，那它就被選中。
E:first-child的第二個(gè)誤區(qū)（不管這個(gè)E元素前面有幾個(gè)兄弟，只要我是第一個(gè)E元素，那我就會(huì)生效）
還是上面的代碼，但是我們?cè)赽ody中的p標(biāo)簽前加了一個(gè)font標(biāo)簽，發(fā)現(xiàn)p已經(jīng)失效了。
上面的兩個(gè)例子已經(jīng)很清楚的告訴我們了這個(gè)選擇器到底應(yīng)該怎么用
:first-child 用于選取屬于其父元素的首個(gè)子元素的指定選擇器
如何只選擇指定元素中子元素呢？不考慮膝下有多少個(gè)孫子和曾孫呢。
子選擇器(>) :只能選擇作為某元素兒子元素的元素（直接子元素），不包括孫元素、曾孫元素等等等
還拿上面的代碼舉例，將>添上試一下效果
有時(shí)候使用錯(cuò)誤的選擇器，卻沒(méi)有報(bào)錯(cuò)。但錯(cuò)了就是錯(cuò)了?？傆斜话l(fā)現(xiàn)的時(shí)候。
很慶幸這次的錯(cuò)誤讓我學(xué)到了知識(shí)。
到此這篇關(guān)于css選中父元素下的第一個(gè)子元素(:first-child)的文章就介紹到這了,更多相關(guān)css父元素下的第一個(gè)子元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS子元素選擇父元素的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-09-01
CSS子元素跟父元素的高度一致的實(shí)現(xiàn)方法
這篇文章主要介紹了CSS子元素跟父元素的高度一致的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-09-02
這篇文章主要介紹了純CSS讓子元素突破父元素的寬度限制,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-09-03- 這篇文章主要介紹了詳解CSS 子元素相對(duì)于父元素固定定位解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-09-03
css通過(guò)子元素選擇父元素的實(shí)現(xiàn)示例
在CSS中無(wú)法直接根據(jù)子元素選擇父元素,因?yàn)镃SS是一種向語(yǔ)言,它只允許選擇器從父元素向子元素匹配，本文介紹了css通過(guò)子元素選擇父元素的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感2024-02-19