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