Html 冲突的CSS代码

因此，我一直有一个巨大的问题，试图插入一个图像滑块到我的网站目前，主要是导航栏CSS代码与滑块的代码冲突。我想有一种方法可以分离不同的CSS代码，但我还没有找到

为了使代码尽可能简单地分解，下面是我使用的CSS

<style type="text/css">
* {margin:0;padding:0;}
 div {position:relative;height:3.2em;background:#FFFF99;border-top:2px
      solid;border-bottom:2px solid;margin:0 0 30px;}
   #nav {position:absolute;left:50%;top:0;margin-left:-380px;
      height:3.2em;width:760px;list-style:none;}
   #nav li {float:left;}
   #nav a {display:block;text-align:center;color:#000;height:3.2em;
      width:120px;line-height:3.2em;text-decoration:none; margin-left:
      -2px;font-weight:bold;border-left:2px solid #000;border-right:2px solid #000;}
   #nav a:hover,
   #nav a:focus {background:#5E9BD9;color:#fff;}
   #nav .active {background-color: #5E9BD9;}
</style>  

*{边距：0；填充：0；}
div{位置：相对；高度：3.2米；背景：#FFFF99；边框顶部：2倍
实心；边框底部：2px实心；边距：0 30px；}
#导航位置：绝对；左侧：50%；顶部：0；左边距：-380px；
高度：3.2米；宽度：760像素；列表样式：无；}
#导航li{浮动：左；}
#导航{显示：块；文本对齐：中心；颜色：#000；高度：3.2米；
宽度：120像素；线条高度：3.2米；文字装饰：无；左边距：
-2px；字体大小：粗体；左边框：2px实心#000；右边框：2px实心#000；}
#导航a：悬停，
#导航a：焦点{背景：#5E9BD9；颜色：#fff；}
#导航活动{背景色：#5E9BD9；}

这是HTML

<div>
<ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="About.html">About us</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact us</a></li>
 <li><a href="#">Booking</a></li>
 <li><a href="#">Register</a></li>
</ul>
</div>

请告诉我如何拆分大量CSS代码（我可以处理单数行，但不能处理像这里这样的大块代码）

---

感谢您的帮助

您必须使用不同的ID-s。

您必须使用不同的ID-s。

听起来这是一个有特殊性的问题，但是如果没有看到滑块的代码，很难说。只要导航栏和滑块没有重叠的类，就不会有任何问题

---

也许向所有滑块元素添加

class=“slider-[sometext]”“

并从中设置样式可以解决您的“冲突”问题？

听起来像是一个特殊的问题，但如果没有看到滑块的代码，很难说。只要导航栏和滑块没有重叠的类，就不会有任何问题

---

也许向所有滑块元素添加

class=“slider-[sometext]”

并从中设置样式可以解决“冲突”问题？

确保为滑块div提供唯一的id，例如

<div id="sliderwrapper"> 

如果用户使用html5，还可以指定自定义属性。e、 g

<div id="sliderwrapper"><a class="classnameyoucreated" data-anythingyouwanttowriteherewillwork="value"></div>

#sliderwrapper > a.classnameyoucreated[data-anythingyouwanttowriteherewillwork=value] {
  background-color: red;
  ... etc etc
  //This is ultra specific and almost impossible to inadvertently override in another css block - specificity is the key here.
}

#SliderRapper>a.ClassName您创建的[data Anything You wanttoWriteHerewillWork=value]{
背景色：红色；
…等等
//这是超特定的，几乎不可能在另一个css块中无意中覆盖-这里的关键是特定性。
}

因为您已经在CSS中指定了#nav，只要#SliderRapper不是该标记的子项，就不应该有冲突。如果你确实有冲突，有一些规则需要记住

浏览器读取的最后一个说明符是优先级

最明确定义的说明符将胜过更模糊的说明符

您始终可以通过添加来覆盖任何值！重要的是结束-但这是懒惰的，是坏的做法时，它的过度使用

你也可以考虑使用更少的文件来增强语法并组织代码。

---

祝你好运

确保给你的slider div一个唯一的id，例如

<div id="sliderwrapper"> 

如果用户使用html5，还可以指定自定义属性。e、 g

<div id="sliderwrapper"><a class="classnameyoucreated" data-anythingyouwanttowriteherewillwork="value"></div>

#sliderwrapper > a.classnameyoucreated[data-anythingyouwanttowriteherewillwork=value] {
  background-color: red;
  ... etc etc
  //This is ultra specific and almost impossible to inadvertently override in another css block - specificity is the key here.
}

#SliderRapper>a.ClassName您创建的[data Anything You wanttoWriteHerewillWork=value]{
背景色：红色；
…等等
//这是超特定的，几乎不可能在另一个css块中无意中覆盖-这里的关键是特定性。
}

因为您已经在CSS中指定了#nav，只要#SliderRapper不是该标记的子项，就不应该有冲突。如果你确实有冲突，有一些规则需要记住

浏览器读取的最后一个说明符是优先级

最明确定义的说明符将胜过更模糊的说明符

您始终可以通过添加来覆盖任何值！重要的是结束-但这是懒惰的，是坏的做法时，它的过度使用

你也可以考虑使用更少的文件来增强语法并组织代码。

---

祝你好运

滑块的代码在哪里？当你已经有了

nav

导航ID时，为什么要使用

nav

作为滑块ID？@JosephMarikle OP在哪里说滑块ID是

nav

？你需要为图像滑块插件提供CSS和JS/JQ（我假设它是一个插件）。您应该使用以下任何或所有服务创建演示：、、或片段（位于文本编辑器工具栏上的第7个图标或CTRL+M）。@zer00ne。这是一个假设，希望OP能做出回应并澄清。注释旨在生成OP和开发人员之间的那种通信。如果我确定OP使用的是相同的ID，我可以回答而不仅仅是评论。滑块的代码在哪里？当你已经有了导航ID

nav

时，为什么要使用

nav

作为滑块ID？@JosephMarikle OP说滑块ID是

nav

？你需要为图像滑块插件提供CSS和JS/JQ（我假设它是一个插件）。您应该使用以下任何或所有服务创建一个演示：、、或一个代码段（位于文本编辑器工具栏上的第7个图标或CTRL+m）@zer00ne绝对没有。这是一个假设，希望OP能做出回应和澄清。评论旨在生成OP和开发者之间的那种沟通。如果我确定OP使用的是相同的ID，我可以回答，而不仅仅是评论。是的，共享滑块的代码，我们可以rt从那里开始。是的，共享滑块的代码，我们可以从那里开始。