假如ul的第一個(gè)子元素不是li，而是p，為什么就沒有效果了？
假如ul的第一個(gè)子元素不是li，而是p，css依然寫
ul>li:first-child{
?color: red;
}
為什么就沒有效果了？
Sharon_zd
2015-06-28
4 回答
舉報(bào)
0/150
提交
取消
2016-01-24
:first-child 表示的范圍是：某父元素的第一個(gè)子元素。而 e:first-child 表示的范圍是：某父元素的第一個(gè)子元素是 e 的元素。那么，
.wrapper > div:first-child 表示的是：.wrapper 下的第一個(gè)子元素是 div 的元素，而
<div class="wrapper">
? <p>我是第一個(gè)段落</p>
? <p>我是第二個(gè)段落</p>
? <div>我是第一個(gè)Div元素</div>
? <div>我是第二個(gè)Div元素</div>
? <p>我是第三個(gè)段落</p>
? <p>我是第四個(gè)段落</p>
? <div>我是第三個(gè)Div元素</div>
? <div>我是第四個(gè)Div元素</div>
</div>
.wrapper 下的第一個(gè)子元素不是 div 而是 p ，所以，選擇不上元素。
而 .wrapper > p:first-child 才是所謂的“正確”選擇，即
.wrapper 下的第一個(gè)子元素是 p 的元素，滿足代碼，可以選擇！
2015-06-29
:first-child
這個(gè)選擇器的意思是，當(dāng)前元素的父元素之下的第一個(gè)同類元素
2015-06-29
但這并不是原因，如果css里改為ul>p:first-child，p就可以顯示為紅色了。即便我不用ul，用div也存在一樣的問題，只要子元素列表項(xiàng)不全為一樣的或者:first-child前的元素不在第一項(xiàng)的地方，使用:firt-child就找不到第一個(gè)子元素。就什么效果也沒有，不信你試試。。
<div class="wrapper">
? <p>我是第一個(gè)段落</p>
? <p>我是第二個(gè)段落</p>
? <div>我是第一個(gè)Div元素</div>
? <div>我是第二個(gè)Div元素</div>
? <p>我是第三個(gè)段落</p>
? <p>我是第四個(gè)段落</p>
? <div>我是第三個(gè)Div元素</div>
? <div>我是第四個(gè)Div元素</div>
</div>
使用
.wrapper>div:first-child {
? background: orange;
}
沒有效果，
使用
.wrapper>p:first-child {
? background: orange;
}
才有效果。
2015-06-28
親，ul子元素不允許放置除除li外的任何元素