列表项样式

Question

我在处理我网站上的一些 CSS 元素时遇到了困难。这一切都归结为列表项!

我有一个菜单栏可以使用 <ul> <li>和 <ol>带有自己的 css 文件的标签，我有一个适用于 <li> 的 slider 来自另一个 css 文件，然后是一些具有自己的 css 文件的网站内容 - 但它们似乎都在相互覆盖并隐藏其他元素!

有没有人知道如何将所有这些分开或如何阻止这种情况发生？

这是一个似乎正在改变一切的菜单 CSS 示例: http://pastebin.com/8Jd2XUUT和核心菜单 CSS: http://pastebin.com/eVsRvxs5菜单 html:http://pastebin.com/P7Qh0M8a主要站点 CSS:http://pastebin.com/kKqP0N1C

Answer 1

了解 CSS specificity ，以及如何使用类和 ID。这些概念将帮助您管理 CSS。

因此在您的 HTML 中您可以:

<ul></ul>
<ul class="foo"></ul>
<ul class="foo" id="bar"></ul>

然后在你的 CSS 中:

/* This targets all ul elements */
ul {
    font-size: 2em;
}
/* This targets only ul elements with a class of foo. It's more specific (has a higher specificity) than the above */
ul.foo {
    font-size: 3em;
    color: aqua;
}
/* The ul with a class of foo and an id of bar gets both sets of styles, but as ID has a higher specificity than class, the font size will be bigger. */
ul#bar {
    font-size: 4em;
}

---

编辑: 啊哈，我看到问题了!您的 CSS 文件似乎以 <ul class="menu"> 中的元素为目标和 <ul class="lblue">分别。你有一个 <ul class="menu lblue slide"> ，这意味着两个 CSS 文件将以相同的 ul 为目标，一个将覆盖另一个。结果将是一团糟。

您需要在 HTML 中将两个菜单分开并相应地定位它们，例如

<ul class="menu"><!-- Put the menu HTML code here --></ul>
<ul class="lblue"><!-- Put the lblue HTML code here --></ul>

您似乎还误解了 id 属性。每页只能使用一次 id，并且不能包含空格。所以id="lblue li"根本不起作用。我建议暂时删除它们!