Css选择器无法正常工作

Question

Doing a self practice first time featured sliding bar in Jquery and having a very weird bug and can't seem to find the reason, maybe some of you will see it.

Having the body consists of 2 parts: navigation divs and fragment divs:

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

There are 2 sets of design classes. The fragment for the chosen fragment and the fragment-hide to hide the fragments not chosen. There are 2 sets of navigation design classes. The nav and the nav-chosen.

This is the 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/

The design works for all element except "featured.nav" no matter what I change (background color, height, width whatever).

It seems like a spelling mistake or a div not closed or something very simple but no matter how many times I read it I just can't locate it. Do you?

Answer 1

You'll need a space between #featured.nav should be #featured .nav . Otherwise it will look for a div with the id featured and the class nav .

Answer 2

You're missing a space between #featured and .nav - the way it is now, you are targeting an element with the ID #featured and the class .nav which is non-existant, based on your HTML.

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

Answer 3

There is a huge difference between

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

and

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

In the first case - you are styling an element that has both id and class. In the second - a .nav inside of #featured .