Botones con esquinas redondeadas y selectores CSS

[javiandgo]

Personalmente no entiendo cual es el rollo de usar tantos elementos si puedes lograr el mismo efecto con menos lineas de código. Dices profundizar en CSS avanzado... pues creo no vas a avanzar así, teniendo en cuenta que CSS3 es donde estamos y CSS4 para donde vamos.

Código HTML:

<a  href="#">lorem ipusm dolor sit amet</a>
 
<ul class="menu">
    <li>
        <a href="menu-item">Centro</a>
        </li>
</ul>
 

Código CSS:

.menu a.menu-item {
background: #333;
padding: 5px 10px;
border-radius:5px;
}
 
.menu a.menu-item:hover {
background:#f60;
}
 

furoya ha acertado bastante mejor en orientarte sobre mejorar el css teniendo los selectores, con 2 son suficientes no hace falta un tercero.

En cuanto a la parte que el boton hace :hover en un elemento diferentes es por el orden en el cual estan declaradas las propiedades CSS del Selector

Código CSS:

a:hover.menu + ul a span.left {
    background:url("menu_item_a_hover_01.png");
}
 

aquí estas diciendo que cuando el elemento a con la clase .menu este seleccionado cambie el fondo del elemento ul a span.left

Código CSS:

ul.menu > li a:hover span.left {
    background:url("menu_item_a_hover_01.png");
}
 

aquí si estas diciendo que todos los elementos span.left que se encuentren dentro de li a:hover y directamente debajo del elemento ul con clase .menu cambien el color del fondo ¡ojo! la clase .menu debe ser declarada al elemento de lista ul y no al link de arriba