Semântica - dos dois modos dá certo

Gostaria de um esclarecimento quanto a semântica de um código. Estou construindo um topmenu com a estrutura:

/Top-Menu/
#navigation{
height:35px; /altura do menu/
width: 300px; /área total ocupada pelo menu/

float: right;
}

#navigation ul{
width: 200px; /largura da área ocupada pelos ícones/
}

#navigation li{
float:left;/flutuação à esquerda garante que os ícones fiquem na horizontal/
margin-top:4px; /margens dos ícones/

list-style-type:none;
}

Esse topmenu será quatro pequenos ícones feito com imagens e efeito hover através do uso do background-position, porém posso construí-lo de ambos os jeitos abaixo só mudando o modo da escrita no código da página, minha dúvida é se existe um modo mais correto da escrita e por que, pois nos vários tutoriais que vi vejo mais o uso do código 1, chamar a classe logo após a id já criada.

1)

#navigation a.m1 {

background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}

#navigation a.m1:hover {background-position: left bottom;}

2)

a.m1 {

background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}

a.m1:hover {background-position: left bottom;}

3)

a#m1 {

background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}

a#m1:hover {background-position: left bottom;}

4) 3)

#m1 a {

background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}

#m1 a:hover {background-position: left bottom;}