課程
/前端開發
/HTML/CSS
/十天精通CSS3
假如ul的第一個子元素不是li，而是p，css依然寫
ul>li:first-child{
?color: red;
}
為什么就沒有效果了？
2015-06-28
源自：十天精通CSS3 6-6
正在回答
:first-child 表示的范圍是：某父元素的第一個子元素。而 e:first-child 表示的范圍是：某父元素的第一個子元素是 e 的元素。那么，
.wrapper > div:first-child 表示的是：.wrapper 下的第一個子元素是 div 的元素，而
<div class="wrapper">
? <p>我是第一個段落</p>
? <p>我是第二個段落</p>
? <div>我是第一個Div元素</div>
? <div>我是第二個Div元素</div>
? <p>我是第三個段落</p>
? <p>我是第四個段落</p>
? <div>我是第三個Div元素</div>
? <div>我是第四個Div元素</div>
</div>
.wrapper 下的第一個子元素不是 div 而是 p ，所以，選擇不上元素。
而 .wrapper > p:first-child 才是所謂的“正確”選擇，即
.wrapper 下的第一個子元素是 p 的元素，滿足代碼，可以選擇！
:first-child
這個選擇器的意思是，當前元素的父元素之下的第一個同類元素
但這并不是原因，如果css里改為ul>p:first-child，p就可以顯示為紅色了。即便我不用ul，用div也存在一樣的問題，只要子元素列表項不全為一樣的或者:first-child前的元素不在第一項的地方，使用:firt-child就找不到第一個子元素。就什么效果也沒有，不信你試試。。
使用
.wrapper>div:first-child {
? background: orange;
沒有效果，
.wrapper>p:first-child {
才有效果。
米飯
親，ul子元素不允許放置除除li外的任何元素
Sharon_zd 提問者
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
8 回答ul的第一個子元素不是第一個<li>么？
6 回答:first-child的意思是，如果 這個元素是它的父元素中的第一個子元素，那么就把它選上，是這么理解吧？
2 回答這樣為什么不是選擇最后一個子元素
3 回答使用::after制作圓形效果時為什么是a::after而不是li::after?
5 回答?ul > li 和 ul li 有啥不同
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-01-24
:first-child 表示的范圍是：某父元素的第一個子元素。而 e:first-child 表示的范圍是：某父元素的第一個子元素是 e 的元素。那么，
.wrapper > div:first-child 表示的是：.wrapper 下的第一個子元素是 div 的元素，而
<div class="wrapper">
? <p>我是第一個段落</p>
? <p>我是第二個段落</p>
? <div>我是第一個Div元素</div>
? <div>我是第二個Div元素</div>
? <p>我是第三個段落</p>
? <p>我是第四個段落</p>
? <div>我是第三個Div元素</div>
? <div>我是第四個Div元素</div>
</div>
.wrapper 下的第一個子元素不是 div 而是 p ，所以，選擇不上元素。
而 .wrapper > p:first-child 才是所謂的“正確”選擇，即
.wrapper 下的第一個子元素是 p 的元素，滿足代碼，可以選擇！
2015-06-29
:first-child
這個選擇器的意思是，當前元素的父元素之下的第一個同類元素
2015-06-29
但這并不是原因，如果css里改為ul>p:first-child，p就可以顯示為紅色了。即便我不用ul，用div也存在一樣的問題，只要子元素列表項不全為一樣的或者:first-child前的元素不在第一項的地方，使用:firt-child就找不到第一個子元素。就什么效果也沒有，不信你試試。。
<div class="wrapper">
? <p>我是第一個段落</p>
? <p>我是第二個段落</p>
? <div>我是第一個Div元素</div>
? <div>我是第二個Div元素</div>
? <p>我是第三個段落</p>
? <p>我是第四個段落</p>
? <div>我是第三個Div元素</div>
? <div>我是第四個Div元素</div>
</div>
使用
.wrapper>div:first-child {
? background: orange;
}
沒有效果，
使用
.wrapper>p:first-child {
? background: orange;
}
才有效果。
2015-06-28
親，ul子元素不允許放置除除li外的任何元素