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使用position: absolute;定位在彼此之上。

我的CSS：

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

我正在尝试给第一个class为"current"的div设置z-index为"2"。我使用的选择器是：

.current {
   z-index: 2;
}

但是那种方式似乎行不通，因为图片不会出现在顶部。但是如果我改成这样写选择器：

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

现在它可以工作了。

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

我用jsfiddle制作了一个https://jsfiddle.net/x1L4tfw4/5/。如果您从css选择器中删除“＃slider div”部分，则会看到差异。

- qua1ity

---

你需要在样式检查器中进行检查，比如在Google开发者工具中找到。检查带有“current”类的元素。你可能会发现还有其他规则（具有更高的特异性）在覆盖你的规则。 - user663031

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity - j08691

使用这个方便的工具 - http://josh.github.io/css-explain/ - Stickers

Answer 1

您没有说明您的CSS中是否也有#slider div选择器。 这将覆盖.current选择器，因为它更具体。

- Amir Geri

---

哦，是的...我没看到那个。谢谢。 - qua1ity

Answer 2

这是一个具体性问题。 #slider div 的具体性是101。 #.current 的具体性为10。

#slider div.current 的具体性为111。

具体性最高的选择器被应用。那么，我怎么得到这些数字呢？

CSS标准规定，将具体性数值基数加在一起即可获得结果。实际上，你可以认为这是位数相加。

标签名值为1个点。

类名或属性值为十个点*。

ID名称为100个点。

（顺便说一下，!important事项的权重是1000）。

因此，将它们加起来，看哪个数值最大。这就是被应用的规则。如果有两个规则具体性相同，则使用源代码中出现的后一个。

• 我在这里简单地说了十个点，但请记住规范指定的是无限大的基数（尽管浏览器实际上使用了256进制，有趣的事实）。因此，十个类不能等于一个ID：单个ID比任何数量的类都更具体性（理论上）。

- Adam D. Ruppe

---

哈哈，我从来不知道lol... 我已经使用CSS工作多年了，用过所有这些，但我从未听过有人这样解释它！ - Adam Buchanan Smith

是的，我曾经实现过一个小型自制浏览器，所以我必须比我自己编写CSS时更深入地了解它...现在许多以前需要记忆的奇怪规则实际上都有意义了。请注意，我在这篇文章中简化了一些内容，除了这些（例如内联样式比ID更具体，但比!important不够，还有伪类和*通配符标签等等），还有更多级别，但是相同的基本思想也适用于那里。另外，请记住，得分与个别规则相关联，现在回退也已经解释清楚了。 - Adam D. Ruppe

Answer 3

这是由于您提供的CSS选择器中存在特异性（或者第三方库提供的）。这里 是一个很好的资源，可以了解CSS特异性和继承是如何工作的。 摘要 以下是链接文章中涉及不同CSS选择器的关键部分：

• 元素，伪元素：d = 1 - (0,0,0,1)
• 类，伪类，属性：c = 1 - (0,0,1,0)
• id：b = 1 - (0,1,0,0)
• 内联样式：a = 1 - (1,0,0,0)

为了帮助理解它们的示例如下：

• p: 1个元素 – (0,0,0,1)
• div: 1个元素 – (0,0,0,1)
• #sidebar: 1个id – (0,1,0,0)
• div#sidebar: 1个元素，1个id – (0,1,0,1)
• div#sidebar p: 2个元素，1个id – (0,1,0,2)
• div#sidebar p.bio: 2个元素，1个类，1个id – (0,1,1,2)

您的情况

现在看看您的特殊情况。首先使用的选择器是 .current ，根据上述信息，它的特异性为：

.current (0,0,1,0)

正如@Admir Geri在他的答案中指出的那样，您还有一个选择器#slider div，其优先级为：

#slider div (0,1,0,1)

由于第二个选择器的特异性大于第一个，所以第二个选择器具有优先权，因此您看不到更改。

您的最后一个选择器#slider div.current具有以下CSS特异性：

#slider div.current (0,1,1,1)

由于此分数超过任何其他选择器，因此在使用此选择器时将显示您的更改，这就是为什么您可以在屏幕上看到它们。

- War10ck

Answer 4

您的CSS写法相当令人困惑。我认为您知道这一点，这些CSS确实遵循ID和Class的直接系统。Javascript关心ID，浏览器对ID有特定的优势。但是CSS并不关心ID和class，除非您使用了这种类型的混淆。

如果您在标记中有多个相同的元素标记，请不要在样式表中使用“#id element .class”。这会破坏样式。

- Mahabub Islam Prio