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樣式繼承/超載

回答

相關問題