CSS hierarchy - div中的div

Question

我有一些CSS，我从一些来源拼凑而成，但我的问题非常基本。

在这个jsfiddle中：http://jsfiddle.net/Ekbsb/1/为什么外部div的UL CSS优先于“下游”div的UL规则？

具体地说：

#bodytopPan ul{margin:0px 0px 0px 25px; padding:0px;}

正在覆盖此代码：

.ILdropdown  ul{
    left: 0;
    margin: 5px 0;
}

即使.ILdropdown ul在超文本标记语言中被放在“较低的”位置。这不是与它应该如何工作的方式相反吗？

我的目标是将body ul代码替换为这个特定实例的代码。

谢谢。

Answer 1

CSS ids (#)优先于类(.)

重写如下：

#bodytopPan ul{margin:0px 0px 0px 25px; padding:0px;}

#bodytopPan .ILdropdown  ul{
    left: 0;
    margin: 5px 0;
}

Answer 2

bodytopPan是一个id，它比.ILdropdown更具体，后者是一个类。特异性越高，越强调声明。

Answer 3

这不是关于HTML中的顺序，而是关于CSS中的顺序。

编辑:如果您想要具体(即只影响" body“中的主要的第一个ul，而不影响其他的)，您可以执行body > ul，它将只针对无序列表，这些列表是body的直接子列表。显然，您可能不会遇到这种情况，更像是body > div > div > ul，但它可以让您更具体地针对哪个UL (如果它没有类)