CSS选择器困惑

Question

所以..我有这个代码:

<div id="slider">
    <div class="current"><img id="img1" src="http://i.imgur.com/gWGqZly.png" /></div>
    <div><img id="img2" src="http://i.imgur.com/mC1FD81.png" /></div>
    <div><img id="img3" src="http://i.imgur.com/HFx9mqa.png" /></div>
</div>

正如你所看到的那样,第一个div有一个名为"current"的类,那就是我想要选择的div.div位于彼此的顶部,位置为:absolute;

我的CSS:

#slider div {
    position:absolute;
    z-index: 0;
}
#slider div.previous {
    z-index: 1;
}
#slider div.current {
    z-index: 2;
}

我试图给第一个div,一个类"current"的z-index为"2".我用来做这个的选择器是:

.current {
   z-index: 2;
}

但这似乎不起作用,这样图像不会出现在顶部.但是,如果我改为以这种方式编写选择器:

#slider div.current {
   z-index: 2;
}

现在它有效.

我有点困惑,这两个选择器基本上没有相同的工作方式吗？在这种情况下他们之间有什么区别？

从这个https://jsfiddle.net/x1L4tfw4/5/制作了一个jsfiddle.如果从css选择器中删除"#slider div"部分,你会看到差异.

Answer 1

你还没有声明#slider div你的CSS中有选择器.这会覆盖.current选择器,因为它更具体.