我有一个网页,在某个时候显示一个导航栏,它只不过是一个 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"样式被覆盖了...
提前致谢!
最佳答案
在您的特定情况下,使用 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);
}
关于CSS 样式继承/重载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4000118/