Question

第一次进行自我练习在Jquery中使用滑动条并且有一个非常奇怪的错误并且似乎无法找到原因，也许你们中的一些人会看到它。

主体由2部分组成：导航div和片段div：

<div id="featured">
  <div id="fragment1" class="fragment">This is fragment 1 to show </div>
  <div id="fragment2" class="fragment fragment-hide">This is fragment 2 to show </div>
  <div id="fragment3" class="fragment fragment-hide">This is fragment 3 to show </div>

  <div id="nav-fragment1" class="nav nav-chosen"> This is navigation element 1 </div>
  <div id="nav-fragment2" class="nav"> This is navigation element 2 </div>
  <div id="nav-fragment3" class="nav"> This is navigation element 3 </div>
</div>

有2套设计类。所选片段的片段和片段隐藏以隐藏未选择的片段。有2套导航设计类。导航和导航选择。

这是CSS：

#featured{
position:absolute;
top:10px;
left:10px;
width: 800px;
 }

#featured .fragment-hide{   
    display:none;   
}  

#featured .nav-chosen{   
    background-color: #00ff00;  
width:300px;
}  

#featured.nav{
background-color: #ffff00;  
width:300px;
}


#featured .fragment{  
   position:absolute;
   top:0px;
   left:300px; 
   background-color: #ffff00;  
   width:500px;
   height:240px;
}

http://jsfiddle.net/isherwood/URFUS/

该设计适用于所有元素，除了＆＃34; featured.nav＆＃34;无论我改变什么（背景颜色，高度，宽度等）。

这似乎是拼写错误或div未关闭或非常简单的事情，但无论我读了多少次，我都无法找到它。你呢？

Answer 1

#featured.nav之间的空格应该是#featured .nav。否则，它会查找ID为featured 和类nav的div。

Answer 2

您错过了#featured和.nav之间的空格 - 现在的方式，您定位的是ID为#featured 和基于HTML的不存在的类.nav。

#featured .nav{ background-color: #ffff00; width:300px; }

Answer 3

之间存在巨大差异

#featured.nav{
    background-color: #ffff00;  
    width:300px;
}

和

#featured .nav{
    background-color: #ffff00;  
    width:300px;
}

在第一种情况下 - 您正在构建一个具有 id和class的元素。在第二个 - .nav内#featured。

Css选择器无法正常工作

3 个答案: