Different CSS for heading link

I have designed specified some CSS style for general hyperlinks开发者_Python百科. I want to specify some other CSS for a hyperlink heading inside a specific div. Please have a look at following HTML code. I want to specify a different style for h2 heading in the div class box only.

<a href="example.com" title="title">Normal Link </a>

<div class ="box">
<h2><a href="example.com" title="heading">Heading Should be red. </a></h2>
    <a href="example.com" title="links">Should be normal green</a>
</div>

Here is CSS code:

a:link, a:visited{
    text-decoration: underline;
    color: green;
}

a:hover{
    text-decoration: none;
    }

.box{
    border: 1px dashed pink;
    width:400px;
    height: 100px;
    margin:10px 0px;
}

.box h2{
    color: red;
    font-size:24px;
}

and here is jsfiddle demo: http://jsfiddle.net/HVX3d/1/

Have you tried targeting the link instead? Like so:

.box h2 a
{
   color: red;
    font-size:24px;
}

It looks like you want to style the tag in the h2, not the h2 itself. See here:

http://jsfiddle.net/Paulpro/HVX3d/2/

Since you are styling the anchor tag with css to be green. Styling the h2 to be red doesn't do anything, it's equivalent to the inline style:

<h2 style="color: red;">
    <a style="color: green;">
       This will be green...
    </a>
</h2>

Try this

.box h2 a {
  color: #fa2;
  font-style: italic;
}

Simple, add this:

.box h2 a {
    color:red;
}

Try this:

.box h2 a {
    color: red;
}