多个DIV，相同的类，如何减少css标记？答案

【问题标题】：Multiple DIVs, same Classes, how to reduce css markups?多个DIV，相同的类，如何减少css标记？
【发布时间】：2011-07-31 02:39:51
【问题描述】：

现在，我有这样的 CSS：

#lightbox2wrapper .panel-col-first .pane-node-title {
text-align:center;
color:#8A3B3B;
font-weight:bold;
font-size:inherit;
margin-bottom:5px;
}

特定的 .panel-col-first .pane-node-title 将出现在多个 DIV 中。我不想使用像

这样的语法

#lightbox2wrapper .panel-col-first .pane-node-title, #div1 .panel-col-first .pane-node-title, #div 2 .panel-col-first .pane-node-title {
... ...
}

这会使 CSS 变得很长。如何使上述标记更短？

谢谢。

【问题讨论】：

标签： css class html css-selectors

【解决方案1】：

div.SomedistinctiveClassName .panel-col-first .pane-node-title{
... ...
}

然后给div，你希望样式生效的地方，类名“SomedistinctiveClassName”（可以更短），你就准备好了

【讨论】：

【解决方案2】：

如果您的逻辑必须明确遵循“仅当 A 出现在 B 中且仅当 B 也在 (C | D | E | F ...) 中时才适用于 A”

那么，抱歉，没有其他方法可以使用 CSS 指定此逻辑。

注意：您不必在一行上运行所有选择器。例如，你可以写：

 #lightbox2wrapper .panel-col-first .pane-node-title,  
 #div1 .panel-col-first .pane-node-title {    
    text-align:center;  
    color:#8A3B3B;  
    [etc.]  
 }

如果您仍然不喜欢如此冗长的选择器，需要考虑的一件事是较短的类名。您是否有权访问代码来更改它们？

并且您有权修改所有潜在目标元素的类名，您可能只想为这种情况创建一个新类，将所有样式应用于该类，并确保将此类放在目标元素。然后，您的 CSS 选择器将不再明确表达此逻辑，但它仍然可以工作。但是，如果您尝试覆盖应用于这些元素的其他样式，则特异性可能仍然是一个问题。

【讨论】：

感谢您的详细回复。