css如何選中父元素下的第一個子元素-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了css如何選中父元素下的第一個子元素，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“css如何選中父元素下的第一個子元素”這篇文章吧。

創(chuàng)新互聯(lián)建站主營方正網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),方正h5成都小程序開發(fā)搭建,方正網(wǎng)站營銷推廣歡迎方正等地區(qū)企業(yè)咨詢

E:first-child的第一個誤區(qū)（只會選中我規(guī)定的區(qū)域中的一個，不會遍歷其下有多少個孫或曾孫元素）

<!DOCTYPE html>
<html>
<head>
<style>
body p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p>這個段落是其父元素（body）的首個子元素。</p>

<h2>歡迎訪問我的主頁</h2>
<p>這個段落不是其父元素的首個子元素。</p>

<div>
<p>這個段落是其父元素（div）的首個子元素。</p>
<p>這個段落不是其父元素的首個子元素。</p>
</div>

<p><b>注釋：</b>對于 IE8 及更早版本的瀏覽器中的 :first-child，必須聲明 <!DOCTYPE>。</p>

</body>
</html>

上面的代碼真的是只會有一個p標簽生效嗎？

css如何選中父元素下的第一個子元素

這是后就已經(jīng)犯了我們常見的第一個誤區(qū)，認為body p:first-child選中的就是第一個元素。

其實，只要在我們選中的body這一塊中，如果這個p在其父元素中屬于第一個，那它就被選中。

E:first-child的第二個誤區(qū)（不管這個E元素前面有幾個兄弟，只要我是第一個E元素，那我就會生效）

css如何選中父元素下的第一個子元素

還是上面的代碼，但是我們在body中的p標簽前加了一個font標簽，發(fā)現(xiàn)p已經(jīng)失效了。
上面的兩個例子已經(jīng)很清楚的告訴我們了這個選擇器到底應(yīng)該怎么用

:first-child 用于選取屬于其父元素的首個子元素的指定選擇器

如何只選擇指定元素中子元素呢？不考慮膝下有多少個孫子和曾孫呢。

子選擇器(>) :只能選擇作為某元素兒子元素的元素（直接子元素），不包括孫元素、曾孫元素等等等
還拿上面的代碼舉例，將>添上試一下效果

css如何選中父元素下的第一個子元素

以上就是關(guān)于“css如何選中父元素下的第一個子元素”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標題：css如何選中父元素下的第一個子元素-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://muchs.cn/article2/cdogic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信小程序、自適應(yīng)網(wǎng)站、小程序開發(fā)、網(wǎng)頁設(shè)計公司、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容