多个CSS规则或jquery

这里是一些“正常”的雪碧菜单代码

#menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

#menu li.m1 a{ background-position:0px 0px; }
#menu li.m1 a:hover{ background-position:0px -55px; }
#menu li.m1 a.selected{ background-position:0px -55px; }

我有6个不同的项目，这将需要6个不同的x类3悬停

这是一个简单的问题，可以用jQuery在2-3行中轻松完成，但是必须为这样简单的事情加载一个库。。。不确定它是否值得

所以，您可以使用jQuery方法，或者根据需要复制粘贴尽可能多的css规则

---

只是一次又一次地做事情，让我做事情还有更好的方法

使用CSS并使用类而不是ID。这样就不需要复制：

.menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

.menu li.m1 a{ background-position:0px 0px; }
.menu li.m1 a:hover{ background-position:0px -55px; }
.menu li.m1 a.selected{ background-position:0px -55px; }

---

@GenericTypeTea在这里有正确的答案。但是你可以把你的css缩小一行，也许两行

a） 组合

.menu li.m1 a：将鼠标悬停

和

.menu li.m1 a.选中

如下

.menu li.m1 a:hover，.menu li.m1 a.selected{背景位置：0px-55px；}

及

b） 可能正在删除

.menu li.m1 a{背景位置：0px 0px；}

---

假设

.m1

是菜单的唯一类，并且0是

背景的默认位置，则可能不需要此行
 这里真正的问题是修复不正确的css。。