css3伪类选择器一个奇怪的现象
本文介绍了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;
}则所有数字的字体都变白了？百思不得其解，望高人指点。
解决方案
我翻译一下：
.container .slide:first-child {
color: #fff;
}这个的意思是，选择.container下、所有的.slide里，位列第一的那个，所以只会命中其中之一；
而在：
.container .skill:first-child {
color: #fff;
}之中，命中的是.container下、所有的.skill里，位列第一的那个，因为.skill出现在所有的.slide下的第一子元素，所以会命中所有的.skill。而如果仍然只想命中第一个的话，就延续前边那个选择器的写法就好，变成：
.container .skill:first-child .skill{
color: #fff;
}就可以了。
这篇关于css3伪类选择器一个奇怪的现象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
