极客观点
项目管理
HarmonyOS
直接上代码：
<!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;
}则所有数字的字体都变白了？百思不得其解，望高人指点。
我翻译一下：
这个的意思是，选择
.container下、所有的.slide里，位列第一的那个，所以只会命中其中之一；而在：
之中，命中的是
.container下、所有的.skill里，位列第一的那个，因为.skill出现在所有的.slide下的第一子元素，所以会命中所有的.skill。而如果仍然只想命中第一个的话，就延续前边那个选择器的写法就好，变成：就可以了。