CSS样式继承/超载

我有一个网页，在某个点上，显示的导航栏不过是一个列表（ul）的a元素。所述和元素的大部分样式规则是常见的。唯一应该改变的部分是要显示的图像，其可以从列表的每个元素的标签中猜出。CSS样式继承/超载

所以这里的问题：

是否有CSS的方式来定义一个像所有一个元素“基地”的风格，然后设置取决于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); 
}

但它似乎并没有工作......“基地”风格被覆盖......

预先感谢您！

来源

2010-10-22 BorrajaX

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

这样的 - 例如：

#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); 
}

来源

2010-10-22 19:13:34

这是*答案。 'background：url（../ images/nav_settings.png）;'应该是'background-image：url（../ images/nav_settings.png）;' – Znarkus 2010-10-22 19:15:45

我完全同意这个答案。 – 2010-10-22 19:17:04

Yuuup ......我刚刚意识到......（嗯......这是让我意识到的萤火虫）我正要回复自己，但你们真的很快！ :) 非常感谢！ – BorrajaX 2010-10-22 19:22:02

您可以设置任何标签的 “基地”，或默认，值。在你的情况，你应该使用的ID的锚，而不是父标签：

一个＃用户等

而且，正如约翰说，使用背景图片，而不是背景的锚，因为设置背景设置了所有背景的属性（背景重复，背景颜色等）

来源

2010-10-22 19:13:42

为什么不在父标签上？ – Znarkus 2010-10-22 19:17:08

如果您有多个标记（如导航层次结构中的标记），则使用#parentDiv a并不好。如果每个锚都将具有不同的图像，为什么不用它自己的ID标识每个锚并在那里设置样式？ – 2010-10-22 19:28:59

哦，我明白你的意思了......是的，对......我也会这样做......实际上，这可能是个好主意:)它可能会简化底层的JQuery – BorrajaX 2010-10-22 22:05:37

CSS样式继承/超载

回答

相关问题