css3伪类选择器一个奇怪的现象
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>selector</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container .slide:first-child {
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div style="margin-left:20px;">
<div>
<div class="slide">
<div class="skill">111</div>
</div>
<div class="slide">
<div class="skill">222</div>
</div>
<div class="slide">
<div class="skill">333</div>
</div>
<div class="slide">
<div class="skill">444</div>
</div>
<div class="slide">
<div class="skill">555</div>
</div>
</div>
</div>
</div>
</body>
</html>这段代码，当style中设置：
.container .slide:first-child {
color: #fff;
}可以看到111字体变白了。
但为什么如果这样设置：
.container .skill:first-child {
color: #fff;
}则所有数字的字体都变白了？百思不得其解，望高人指点。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我翻译一下：
这个的意思是，选择
.container下、所有的.slide里，位列第一的那个，所以只会命中其中之一；而在：
之中，命中的是
.container下、所有的.skill里，位列第一的那个，因为.skill出现在所有的.slide下的第一子元素，所以会命中所有的.skill。而如果仍然只想命中第一个的话，就延续前边那个选择器的写法就好，变成：就可以了。
这个选择器相对的是其父标签，所有的skill都是slide的第一个子标签，自然都会命中。