0

我在我的网站上遇到了一些 CSS 项目的问题。这一切都归结为列出项目！

我有一个菜单栏，可以使用<ul> <li>和<ol>标记他们自己的 css 文件，我有一个滑块，可以<li>从另一个 css 文件工作，然后是一些具有自己 css 文件的网站内容 - 但它们似乎都在相互覆盖并隐藏其他项目！

有没有人有任何关于如何将所有这些分开或如何阻止这种情况发生的提示？

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

4

4 回答 4

1

提供您的列表 ID，然后专门针对这些 ID。由于 ID 必须是唯一的，因此您可以定位一个列表而不影响另一个列表。

例如，使用以下 HTML：

<ol id="list1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<ul id="list2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

您可以使用以下 CSS

#list1 li {
    color: red;
}
#list2 li {
    color: blue;
}

它将不同的颜色应用于每个列表的列表项。

于 2012-07-31T14:39:02.450 回答
1

了解CSS 的特殊性，以及如何使用类和 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"根本行不通。我建议现在删除它们！

于 2012-07-31T14:54:07.587 回答
0

学习特异性规则http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

这将教您有关 id 的权重以及其中的类和组合。

还有要考虑的订单样式（相同权重最后获胜）

于 2012-07-31T14:41:58.210 回答
0

尝试提供唯一的 id

<ul id="id">
    <li>content</li>
    <li>content</li>
</ul>

#id li {
    color: xx;   also you can try color:xx!important;
}
于 2012-07-31T14:44:34.840 回答