简化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 } 

还是作为乔恩低于。