Свой стиль для каждого href - Вопросы по CSS

<div id="main_menu">
               <a href="#">  Главная  </a>
               <a href="# " >Проекты </a>
  </div>

<div id="main_menu">
               <a href="#" сlass=”one”>  Главная  </a>
               <a href="# " сlass=”too”>    >Проекты </a>
 </div>

#main_menu .one a:hover {
background-image: url(../images/link_bg_one.png); 
color:#231f20;
background-repeat: no-repeat;
}

#main_menu .too a:hover {
background-image: url(../images/link_bg_too.png); 
color:#231f20;
background-repeat: no-repeat;
}

#main_menu .one a:hover

.one  a:hover {}

a.one:hover

display: inline-block;

a.one:hover{...}
-------------------------
<a hef="#" class="one"></a>

a.h {
 display:block;
 width:118px;
 height:40px;
 background:url(../img/menu.png) left top;
	}
 a.h {
  background-position:left 480px;
 }
a.h:hover{
   background-position:left 400px;
 }

<script type="text/javascript">
window.addEvent('domready', function(){
$('one').set({
    'events': {
        'mouseover': function(){ this.set({
        'styles': {
        'font': '20px Arial',
        'color': '#FF0000'
        }
        })},
        'mouseout': function(){ this.set({
        'styles': {
        'font': '12px Arial',
        'color': '#0000FF'
    	}
        });
        }},
});
});
</script>
<a href="" id = "one">Смотрим</a>

a.one_link{
    display: inline-block;
    width:100px;
    border:1px solid #cccccc; 
    text-align:center;
    
}
a.one_link:hover {
    background:  url(../images/link_bg.png); 
}