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有一个名为＆＃34; current＆＃34;那就是我想要选择的div。 div位于彼此的顶部，位置为：absolute;

我的CSS：

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

我试图给第一个div，一个有班级＆＃34;当前＆＃34; z-index为＆＃34; 2＆＃34;。我用来做这个的选择是：

.current {
   z-index: 2;
}

但这似乎不起作用，这样图像就不会出现在顶部。但是，如果我改为以这种方式写选择器：

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

现在可行。

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

从这个https://jsfiddle.net/x1L4tfw4/5/中取出一个jsfiddle如果你删除＆＃34; #slider div＆＃34;从css选择器的一部分你会看到差异。

Answer 1

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

Answer 2

这是一个特殊性问题。 #slider div的特异性为101. #.current的特异性为10。

#slider div.current位于111。

具有最高特异性的选择器是使用的选择器。现在，我是如何获得这些数字的？

CSS标准规定，您可以添加具有无限大基数的数字来获取它。在实践中，您可以将其视为数字。

标签名称值得一分。

类名或属性值值十*分。

ID名称值100分。

（顺便说一下，重要的事情值1000）。

所以你把它们加起来看看哪个号码最高。这是应用的规则。如果两个规则具有相同的特异性，那么源代码中最后出现的规则就是使用的规则。

为了简单起见，我在这里说了十句，但请记住，规格说的是无限大的基数（尽管浏览器实际上使用的是256，有趣的事实）。因此，十个类不等于一个ID：单个ID比任何数量的类更具体（理论上）。

Answer 3

这是由于您提供的选择器中的CSS特性（或者可能是第三方库提供的）。 Here是理解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)

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

Answer 4

你做CSS的方式很混乱。我想你知道，这些CSS确实尊重ID和Class的直接系统。 Javascript关心ID。浏览器具有ID的特定优势。但CSS并不关心ID和类。直到你引起这种混乱。

如果您的标记中有多个相同的#id element .class，请勿在样式表中使用<element-tag>。这会破坏风格。

CSS选择器困惑

4 个答案: