Question

在我的情况下，我简化了一个嵌套列表并包含div，我无法改变它，它是由drupal菜单创建的。

我想要克隆硬编码网站的菜单（编辑删除的链接）

如何在子菜单中“嵌入”这些框（ul li ul li items），是否可以只在块显示的列表中？我需要一个z-index吗？还是漂浮？在列表项上是否可以浮动？

一般来说，我理解级联的东西，但仍然很难写css几乎没有重复。一些缩短技巧会很好。

我现在的主要问题是为什么最后一个条目（标记）的样式被覆盖。文件中的订单是否起作用？

#block-system-main-menu .content {
    font-size: 17px;
    font-weight: bold;
}

#block-system-main-menu div ul li {
    width: 207px;
    margin: 4px 0px;
}

#block-system-main-menu div ul li {
    display: block;
    height: 38px;
    background: url(/sites/all/themes/schott/menuitembg.gif);
}

#block-system-main-menu div ul li .active-trail {
    display: block;
    height: 60px;
    background: url(/sites/all/themes/schott/menuitembg_p.png);
}

div ul li ul li.leaf {   /* both styles are overwritten */
    display: inline-block;
    background: url(/sites/all/themes/schott/subitem_passive.gif);
}

Answer 1

最后编写的CSS规则是使用的规则，但特殊性优先于级联。

关于特异性的文章：http://css-tricks.com/specifics-on-css-specificity/

因此#block-system-main-menu div ul li .active-trail是最具体的，会覆盖其他规则。

Answer 2

将其更改为：

#block-system-main-menu div ul li ul li.leaf {

我对你提出的问题感到有些困惑，但总的来说，如果你有两个相同的规则，那么后者将被应用。但是，如果规则不相同，则更具体的规则优先。

编辑：对不起，我可以看到你刚想出来

Answer 3

是的，CSS的顺序绝对起作用。在样式之后声明的任何内容都会覆盖前一个样式。此外，如果要覆盖某种默认样式，请在默认样式之后包含它们（无论是将它们写在同一个文件中，还是只是对自己的样式表进行元链接）。

css文件中的顺序是否起作用？

3 个答案: