                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

关于选择器：nth-last-child的运用

nth-last-child（1）选中的不应该是最后一个<p>555555<p>吗？求解

<!DOCTYPE html>

<html>

<head>

.album > p:first-child:nth-last-child(1){border: 10px solid #f60;}

</style>

</head>

<body>

</div>

</div><div class='album'>

</div>

</div>

</div>

</div>

</body>

</html>

慕码人7160198

2017-01-20

源自：初识HTML(5)+CSS(3) 8-7

关注问题我要回答

1472

操作

收起

1 回答

慕粉1019149162 回答被采纳 +3 积分
2017-01-20

当div中有多个p时 p:first-child:nth-last-child(1)就冲突了，first-child设置的是第一个p的样式，nth-last-child(1)设置的是最后一个p的样式，所以会看到只有第一个div的p设置了样式，因为这个div里只有一个p

0 回复有任何疑惑可以回复我~

收起回答

慕码人7160198 提问者

还是不能理解，提问那里我写错了而且没有描述清楚，这里我说下我的思路，望指点：‘.album > p’选中类名album下的所有p，‘:first-child’选中每个div下的第一个p,所以当我们为上述语句增加选择器nth-last-child(1)时，选中的应该是倒数第一个div下的第一个p

2017-01-21 回复有任何疑惑可以回复我~

慕粉1019149162 回复慕码人7160198 提问者

nth-last-child(1)选择的是div下的最后一个p（倒数第一个p）,不是倒数第一个div。所以如果没有:first-child，那么所有div的最后一个p都会应用边框样式，但是，又有:first-child，所以，first-child选择的是第一个p,nth-last-child(1)选择的是div下的最后一个p,除了第一个div，其他div下的第一个p和最后一个p都不是同一个，矛盾。 PS，为什么要写酱紫摸棱两可的代码？

2017-01-21 回复有任何疑惑可以回复我~

慕码人7160198 提问者回复慕粉1019149162

懂了懂了，非常感谢！这是看别人的代码遇到的，为什么说模棱两可，是还有更好的写法吗

2017-01-21 回复有任何疑惑可以回复我~