CSS 样式继承/重载

Question

我有一个网页，在某个时候显示一个导航栏，它只不过是一个 a 元素的列表 (ul)。所述 a 元素的大多数样式规则都是通用的。唯一应该改变的部分是要显示的图像，可以从列表中每个 li 元素的 id 标签中猜出。

那么问题来了:

在 CSS 中有没有一种方法可以为所有 a 元素定义类似“基本”样式的东西，然后根据 id 设置图像？也许不是 ( CSS Control Inheritance - Inheriting Other Control Styles )，但我想确定。

我试过:

#nav li a {
    /*This would be the 'base' For all the "a"s inside a 
      list inside an element with id=nav (nav -> navigation)*/
 background-color: transparent;
 background-repeat: no-repeat;
 background-position: 0 -58px;
 border-left: thin #444444 solid;
}


#nav li#settings a {
 background: url(../images/nav_settings.png);
}

#nav li#media a {
 background: url(../images/nav_media.png);
}

#nav li#user a {
 background: url(../images/nav_admin.png);
}

但是好像不行..."base"样式被覆盖了...

提前致谢!

Answer 1

在您的特定情况下，使用 background-image CSS 指令。当您使用 background 时，您将重置所有先前设置的 background-* 属性。

像这样 - 示例:

#nav li#settings a {
 background-image: url(../images/nav_settings.png);
}

#nav li#media a {
 background-image: url(../images/nav_media.png);
}

#nav li#user a {
 background-image: url(../images/nav_admin.png);
}