CSS层次结构 - 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放在HTML中“较低”。这不是它应该如何工作的反面吗？

我的目标是将body ul代码替换为此特定实例的内容。

感谢。

Answer 1

CSS ID（＃）优先于类（。）

重写如下：

#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中的顺序。

编辑：如果你想要具体（即只影响主体，“身体”中的第一个ul，而不影响其他人），你可以body > ul只针对身体的直接孩子的无序列表显然你可能不会遇到这种情况，更像是body > div > div > ul，但它可以让你更具体地说明你想要定位哪个UL（如果它没有课程）