簡化CSS代碼

Question

如何簡化此代碼？

#user_panel .subscribe, 
#user_panel .faves, 
#user_panel .tags, 
#user_panel .title, 
#user_panel .calendar a, 
#user_panel .item .content 
{ 
    color:#fc0; 
} 

我不想一直寫#user_panel。無論如何？

Answer 1

LESS（少CSS）？讓你的生活變得如此簡單！

#user_panel { 
    .subscribe, .faves, .tags, .title, .calendar a, .item .content { 
     color:#fc0; 
    } 
} 

編輯：根據評論，LESS僅在使用Ruby時有用。這是完全錯誤的。 LESS是用Ruby編寫的（不要與混淆，只與兼容），並附帶一個命令行工具less2css來將*.less文件轉換爲*.css文件。

Answer 2

我要去最常見的答案，因爲你沒有給我一個理由不:-)

#user_panel 
{ 
    color:#fc0; 
} 

的另一種方法是每個元素上添加額外的類，然後引用多種類型，當你需要它，比如：

.highlight 
{ 
    color:#fc0; 
} 

<div id="user_panel"> 
    <span class="subscribe highlight"></span> 
    <span class="tags highlight"></span> 
</div> 

Answer 3

你可以給每個那些所謂。用戶用面板控制的第二類的元素，改變CSS來此：

#user_panel .user-panel-control 
{ 
    color:#fc0; 
} 

的HTML應該是這樣的：

<div id="user_panel"> 
    <span class='subscribe user-panel-control'>This is a user panel control</span> 
</div> 

Answer 4

約短那是因爲你會得到。你可以重命名user_panel，但是你應該儘量保持你的標識符的描述性，以使代碼更容易維護。顯而易見的問題是，你的選擇器甚至需要#user_panel部分嗎？

潛在的你可以這樣做：

#user_panel *{ color: #fc0 } 

還是作爲喬恩低於。