List 列表项样式

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

我有一个菜单栏，它使用

和

标记以及它们自己的css文件工作，我有一个滑块，它可以从另一个css文件工作
，然后一些网站内容有它自己的css文件-但它们似乎都在相互覆盖并隐藏其他项目

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

下面是一个菜单css的示例，它似乎正在改变一切：
以及核心菜单css：
菜单html:main sites css:
给出列表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>

将不同的颜色应用于每个列表的列表项。
了解特定性规则

这将教你关于id的权重、类和它们的组合

也有顺序样式被用来考虑（在相同的权重最后赢）
尝试给出唯一的ID 
<ul id="id">
    <li>content</li>
    <li>content</li>
</ul>

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


内容
内容

#李先生{
颜色：xx；您也可以尝试颜色：xx！重要；
}
了解以及如何使用类和ID。这些概念将帮助您管理CSS

因此，在HTML中，您可以：

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


编辑：啊哈，我看到问题了！CSS文件分别以
和
中的项目为目标。您有一个
，这意味着两个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”
根本不起作用。我建议现在就把它们去掉
 如果您不将代码放在这里或JSFIDLE.net上，我们只能祈祷了。您应该使用firebug（或WebKit中的inspector）检查您的页面以查看规则覆盖。然后你就可以了解在哪里可以修改你的继承层次结构了。查看HTML也会有很大帮助。在你的两个CSS文件中没有什么特别的东西会使一组样式相互干扰。一开始，他们的目标完全不同。啊，我明白你的问题。您的CSS文件相互覆盖，因为您有一个它们似乎都针对的
。我已经相应地编辑了我的答案。我正在研究这个问题，但我不确定如何在菜单css中使用它，这似乎导致了所有的问题。它有很多css中的
.lblue lu>ul>li
，这让我非常困惑！您将为列表提供唯一的ID，然后修改CSS以使用这些ID。如果你用你的代码编辑你的原始问题，我可以更新我的答案，使之更具体。你发布的代码有两个问题：许多元素的ID包含一个空格（它们不应该有空格），ID被重复使用（每个文档只能使用一次）.我的答案仍然有效：您有一个
ul
元素，其中
class=“menu lblue slide”
。然后您有多个CSS文件，目标至少是其中的两个类。它们将相互覆盖，因此您需要以某种方式将它们分开。尝试将其更改为
class=“menu”
以停止影响菜单的lblue和滑块类。然后，也许您应该了解CSS选择器以及它们如何处理HTML元素。看起来lblue指向了菜单栏的主题，所以从类标记中删除lblue后，它就变成了纯文本OK，回到基础。为那里的菜单创建一个只包含HTML+CSS+JS的页面。这正确吗？现在，为滑块添加HTML、CSS和JS。那会破坏东西吗？如果是，请查看类是否冲突（例如，它们是否都使用class=“slide”？）。现在为您提到的其他内容添加HTML、CSS和JS。那会破坏东西吗？如果是这样，请使用浏览器开发工具来帮助找出原因。我已经为此奋斗了很长时间，并找到了问题的原因。如果查看菜单html文件，底部缺少一个
，这意味着使用菜单类打开的
现在已关闭，并且不会与其他内容冲突！
/* 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;
}

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