'.body-wrapper p' overriding class lower in stylesheet - why?

I'm having trouble understanding why a style I have lower in the stylesheet is being overridden by a style higher up. Can anyone help explain this to me?

Stylesheet (well just the resets in case they're needed, and the 2 classes):


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-family: Arial, Helvetica, sans-serif;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}

input {padding: 0; margin: 0;}

/* - - - - - - - - - - - - universal styles */

html, body {height: 100%;}
body {background: url(../images/bg.jpg) top left;}

a {color: #fff; font-size: inherit; text-decoration: none; outline: 0; outline: none;}
a:visited {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: none;}
:focus {outline: 0;}

p {color: #ccc;}

.body-wrapper p {color: #ccc; font-size: 0.8em;}

/* ------- farther down... */

.form-sublabel {
color: #666;
font-size: 0.7em;}



the html:


<div class="body-wrapper">

<div class="content-div1">
<h2 class="style1">Heading</h2>

<form>
<div class="form-contact-wrapper">

<div class="row-wrapper">
<div class="label-container"><p class="label">Name<span class="req">*</span></p></div>
<div class="field-container"><input type="text" name="Name" class="field" /></div>
</div>


<div class="row-wrapper">
<div class="form-sublabel-container"><p class="form-sublabel">* Required</p></div>
<div class="form-submit-container"><input type="submit" class="form-submit" name="Submit" value="" /></div>
</div>

</div>
</form>
<!-- end:form -->

</div>

<div class="content-div2">
<h3 class="style1">Other Heading</h3>

<div>
<p>Lorem ipsum sit dolor amet...</p>
</div>

</div>


The text inside the "form-sublabel" class is supposed to be small and dark gray. The standard page text with Lorem ipsum is supposed to be medium-size and light gray.

".body-wrapper p" should only be changing the Lorem ipsum into medium-size light gray, right? But it's changing the "form-sublabel" text into medium-size light gray too, even though "form-sublabel" is defined farther down the stylesheet.

If I put a p in front of the style ("p.form-sublabel"), the issue is corrected. The thing is, I can't figure out why this is happening in the first place. Does anyone care to enlighten me? I'd really appreciate it. Thanks.

The order of css rules is taken into account, but of more significance is the specificity of css selectors. This article (http://www.htmldog.com/guides/cssadvanced/specificity/) introduces the subject.

From the article:Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

Thank you, thank you thank you thank you thankyouthankyou.