How to get a different link color on my tumblr static page then my main (front page?)

The links on my front page (that is the page where the POSTS come up) are red, when hovered they turn white. However on my STATIC page, i want the links to be white and red when hovered, how do i do that? Tumblr allows to add html to your static page.

this is the css markup for my front page:

  a{
  text-decoration:none;
   color:red;
   }

 a:hover{
 color:white;
-moz-transition: all .2s;
 -webkit-transition: all .2s;
 -o-transition: all .2s;
   transition: all .2;
  }

Now this is the html on my static page

   <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>

the static page inherits the html and css of the front page. i've tried adding

       <div id="page"> </div>

so that it becomes

<div id="page">
 <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>
  </div>

and then trying to style it with css:

ul.list li {
color: white

}

but this won't work.. :( could someone help me out here?

Solution

It's not working because you're not actually targeting the anchor tag in your second style declaration. Try:

#page #list a {
    color: #fff; /* white */
}

This won't change the hover state, but it will change the color. To change the hover state you'll have to target that specifically to override the generic a:hover you've defined above.

You'll also want to define the ':visited' styles, otherwise you might not see these changes reflected (because the link has already been visited).

#page #list a:visited {
    color: #fff; /* white */
}

Or you could define all of the states in one block, assuming they're supposed to have identical styles.

#page #list a, #page #list a:visited, #page #link a:hover, #page #list a:active {
    color: #fff; /* white */
}

In case it's not clear, the first selector is targeting the link as it would be initially, the second targets the link once it's been visited, the third targets the link's hover state (i.e., styles for when the mouse is over the link) and the fourth targets the link's active state (i.e., when the link is actually being clicked/tapped).

Also, you're not using the correct selector for selection by ID. '.' selects by class, '#' selects by ID.