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，也可以指定自定义属性。 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.
}

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

浏览器读取的最后一个说明符是优先级
最明确定义的说明符将胜过更模糊的说明符
你总是可以通过在末尾添加！important来覆盖任何值 - 但这很懒惰，并且当它被过度使用时是不好的做法。

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

Answer 2

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

或许将class="slider-[sometext]"添加到所有滑块元素并从中设置样式可以解决您的“冲突”问题。问题

Answer 3

你必须使用不同的ID。

冲突的CSS代码

3 个答案: