冲突 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

您必须使用不同的 ID。

Answer 2

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

也许向所有滑块元素添加 class="slider-[sometext]" 并从中添加样式可以解决您的 'conflict' 问题？

Answer 3

确保你给滑块 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 不是该标签的子标签，您就不应该有冲突。如果您确实有冲突，请记住一些规则。

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

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

祝你好运

冲突 CSS 代码

Conflicting CSS code

html

css

image

slider