Creating Stylesheets - Referencing Styles

I'm fairly comfortable using CSS. However, one thing I continue to suffer agnst from is referring to styles in external stylesheets.

Say for instance I'm styling some elements within a <div> with a class of .item. This <div> is nested within several layers of other <div> tags.

I may write some styles like this:

Code:

.item {
float:left;
width:100%;
}

.item .heading{
float:left;
width:100%;
background:#8c8070;
}

.item .heading h3{
float:left;
width:45%;
margin:0px;
}

.item .heading price{
float:right;
width:45%;
}

When I view this, my <h3> still carries the more global styles. It's only when I provide some of the other classes & ids higher in the chain that the style works as expected. Example:

Code:

#content .twohigher .onehigher .item .heading h3{
float:left;
width:45%;
margin:0px;
}

Can someone explain the rule of how to reference styles in the markup from an external stylesheet? Just looking to reduce my troubleshooting time.

Thanks in advance.