Question

我的网站上有一些css项目有困难。这一切都归结为列出项目！

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

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

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

Answer 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;
}

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

Answer 2

了解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"根本不起作用。我建议暂时删除它们！

Answer 3

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

这将教你关于id的重量和类及其组合的重量。

还有应用的订单样式（以相同的权重赢得）

Answer 4

尝试提供唯一ID

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

#id li {
    color: xx;   also you can try color:xx!important;
}

列出项目样式

4 个答案: