假如ul的第一个子元素不是li，而是p，为什么就没有效果了？
假如ul的第一个子元素不是li，而是p，css依然写
ul>li:first-child{
color: red;
}
为什么就没有效果了？
5 回答
: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 的元素，满足代码，可以选择！
但这并不是原因，如果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;
}
才有效果。
举报
0/150
提交
取消
