谁是谁的first-child
生活随笔
收集整理的這篇文章主要介紹了
谁是谁的first-child
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
看過(guò)CSS偽類(lèi)選擇器之后，心想也就如此嘛，:first-child選擇元素的第一個(gè)子元素，有什么難的，可一到實(shí)踐中，還是到處碰壁啊。
1 <body> 2 <ul class="fruit"> 3 <li>Apple</li> 4 <li>Orange</li> 5 <li>Pear</li> 6 <li>Grape</li> 7 </ul> 8 <div class="content"> 9 <p>I am learning CSS.</p> 10 <p>I want to be a programmer.</p> 11 </div> 12 </body>設(shè)置ul的第一個(gè)子元素的背景顏色，我想當(dāng)然地使用了 ul:first-child{backgroud-color:#ccc;}，結(jié)果發(fā)現(xiàn)整個(gè)ul元素都被選中了！
再回頭看手冊(cè)“:first-child選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器”，針對(duì)上述代碼，也就是說(shuō)應(yīng)該設(shè)置成這樣：
li:first-child{backgroud-color:#ccc;}或者.fruit>:first-child{backgroud-color:#ccc;}
同理，若想選擇<div>的第一個(gè)<p>元素，應(yīng)該設(shè)置：
p:first-child{backgroud-color:#789;}或者.content>:first-child{backgroud-color:#789;}
轉(zhuǎn)載于:https://www.cnblogs.com/gexinpeng/p/4826186.html
總結(jié)
以上是生活随笔為你收集整理的谁是谁的first-child的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【SSH】——Struts2中的动态方法
- 下一篇： CSS3动画之百度钱包