冲突的 CSS 代码

Question

所以我目前在尝试将图像滑块插入我的网站时遇到了一个大问题，主要是导航栏 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>  

这里是 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 代码（我可以使用单行，但不能像我这里那样处理大块）

感谢任何帮助！

Answer 1

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

<div id="sliderwrapper"> 

然后按以下方式编写您的 css 代码

#sliderwrapper {
  background-color: #ddd;
  ... etc etc

}
#sliderwrapper > div {
  //this applies to divs that are DIRECTLY below the slider object
  color: brown;
  ... etc
}
#sliderwrapper div {
  //Any div at any level below the slider, not just directly below
}

#sliderwrapper .classnameyoucreated {
   //classes that exist below the slider at any level

}

如果您使用 html5，您还可以指定自定义属性。例如

<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.
}

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

1. 浏览器读取的最后一个说明符是优先级
2. 定义最明确的说明符将胜过更模棱两可的说明符
3. 您始终可以通过在末尾添加 !important 来覆盖任何值 - 但这是懒惰的，并且在过度使用时是不好的做法。

您还可以考虑使用 .less 文件来稍微增强语法并组织代码。

祝你好运

Answer 2

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

也许将class="slider-[sometext]" 添加到所有滑块元素并从那里添加样式可以解决您的“冲突”问题？

Answer 3

您必须使用不同的 ID。