多个 CSS 规则或 jquery答案

【问题标题】：Multiple CSS rules or jquery多个 CSS 规则或 jquery
【发布时间】：2011-04-07 23:30:49
【问题描述】：

这是精灵菜单的一些“正常”代码

#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..

标签： jquery css rules

【解决方案1】：

使用 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; }

【讨论】：

【解决方案2】：

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

a) 像这样结合.menu li.m1 a:hover 和.menu li.m1 a.selected

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

和

b) 可能删除.menu li.m1 a{ background-position:0px 0px; }

假设 .m1 是 menu 的唯一类，并且 0 0 是 background 的默认位置，这可能会使这一行变得不必要。

【讨论】：