活动/非活动类用于CSS的良好图标使用

我正在做一个网站，我在CSS中定义图标，然后在HTML中用一个简单的类来使用它，例如，这是用于仪表板的：

.icon {padding-left: 22px;line-height: 16px;}

.icon-dashboard {background: url("/img/icons/dashboard_off.png") no-repeat}
.icon-dashboard:hover, .icon-dashboard:active {background: url("/img/icons/dashboard_on.png") no-repeat}

然后我可以使用它：

<a class="icon icon-dashboard" href="index.html">Dashboard</a>

现在我有了一个

锚定

，它带有一个图标，当我悬停时，它会显示颜色（off=b&w，on=color）。没关系，所有我的菜单默认都处于关闭状态，当鼠标悬停到打开状态时

问题：此图标用于在单击默认情况下隐藏的子菜单时显示子菜单。当我用

图标单击
锚定
时，会显示下一个
。没关系，但是当我移动时抛出这个
锚，当然，处于关闭状态

我需要添加一个类或其他东西，将
锚定的图标保持在“开”状态，但我想知道是否可以在不重写类的情况下执行此操作，如
图标仪表板处于活动状态
。其中一个主要原因是，我想在单击javascript时添加一个自动转换为“打开”状态的类

我希望这能得到更好的解释

提前谢谢你
 CSS

.icon {
    padding-left: 22px;
    line-height: 16px;
}

.icon.dashboard{
    background-image: url("/img/icons/dashboard_off.png"); 
    background-repeat: no-repeat;
}
.icon.dashboard:hover, 
.icon.dashboard:active,
.icon.dashboard.active{
    background-image: url("/img/icons/dashboard_on.png")
}

HTML



这就是如何做好CSS样式的继承

如果将类
active
添加到锚点，它将保持强制“打开”状态，直到删除该类

请确保关闭您的
背景
属性…还有，为什么不关闭
。图标仪表板{左侧填充：22px；行高：16px；背景：…；}
？它和你现在所学的一样，也减少了上课时间。@Samir:我会尽量解释得更好，英语不是我的主要语言；（@Andrew，因为我喜欢50个图标，而“左填充：22px；线条高度：16px；”=38个字符*50=1900。如果我在一页上使用50个图标，图标=4chars*50=200。这就是原因。@Samir Adel:现在好多了？提前谢谢你！
<a class="icon dashboard" href="index.html">Dashboard</a>