How do I change text colour in this css code?

I have a simple header with some menu items:

<div id="header">
<ul id="开发者_Python百科menu">
<li class="item">
<a class='loginlinks' href='/signup'>Sign Up</a>
<a class='loginlinks' href='/login'>Log In</a>
</li>
</ul>
</div>

I am trying to change the Sign Up and Log In text colour to white using the code below but it's having no effect...the text keeps inheriting the global text colour of red.

.loginlinks a {
color: white;
}

What am I doing wrong here?

EDIT: I see my error, however even changing css to a.loginlinks did not do the trick.

RESOLVED All correct answers, I selected the reference to firebug as that ultimately helped me identify the problem. Thanks to everyone.

Best practice is to use color code (hex), not the name.

a.loginlinks {
color:#FFFFFF;
}

because assigning color by color name is now deprecated.

working DEMO

note: if you still have the problem then try to debug with firebug, it may be that some other property is inherited

Reference: http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast

That says "a tags within elements of the loginlinks class". You want "a tags that have the loginlinks class":

a.loginlinks {
    color: white;
}

try this :)

a.loginlinks {
    color: white;
}

that's because there are no .loginlinks a at your DOM.

In other words, check it again and you'll see that the class .loginlinks is attached to the a.

So, in order to meke it work, just use this CSS:

a.loginlinks {
   color: white;
}

EDIT: after reading the OP edit, the solution depends on how the "global" a are behing defined.

If the OP is "desperate" he/she can use the !important property, whch will override all other definitions.

Like this:

a.loginlinks {
    color: white !important;
}

Change CSS to

a.loginlinks {
color: white;
}

If I'm assuming your condition correctly then it will be solve like this

body {background:red;color:red}
#header a {color:yellow}
#header a.loginlinks {color: white }

See example here http://jsfiddle.net/pyNEe/