css文件中的顺序起作用吗?

发布于 2024-10-20 11:55:48 字数 914 浏览 2 评论 0原文

就我而言,我简化了嵌套列表和封闭的 div,我无法更改它,它是由 drupal 菜单创建的。

我想克隆硬编码网站的菜单(编辑删除的链接)

我如何在子菜单中“嵌入”框(ul li ul li items),是否可以仅在块中的列表中展示?我需要为它们提供 z 索引吗?还是漂浮?列表项上是否可以浮动?

总的来说,我理解级联的事情,但仍然努力编写很少重复的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);
}

In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.

I want to clone the menu of a hardcoded site (edit removed link)

How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?

In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.

My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?

#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);
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

余生再见 2024-10-27 11:55:48

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

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

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

The last CSS rule written is the one that is used, but specificity takes priority over cascading.

An article on specificity: http://css-tricks.com/specifics-on-css-specificity/

So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.

千と千尋 2024-10-27 11:55:48

是的,CSS 的顺序确实发挥了作用。样式后声明的任何内容都会覆盖前一个样式。另外,如果您想覆盖某种类型的默认样式,请将它们包含在默认样式之后(无论您将它们写入同一文件中,还是只是对您自己的样式表进行元链接)。

yes, the order of CSS definitely plays a role. Anything declared after a style overwrites the previous one. Also, if you want to overwrite default styles of some sort, include them after the default ones (whether you write them in the same file, or just do a meta link to your own stylesheet).

闻呓 2024-10-27 11:55:48

将其更改为:

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

我对您所问的内容有点困惑,但一般来说,如果您有两个相同的规则,则将应用后者。但是,如果规则不相同,则以更具体的规则为准。

编辑:抱歉,我可以看到你刚刚发现了这一点

Change it to:

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

I'm slightly confused by what you're asking, but in general, if you have two identical rules, the later will be applied. However, if rules are not identical, the more specific rule will take precedence.

Edit: sorry, I can see you just figured that out

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文