Question

现在，我有这样的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很长。如何缩短上述标记？

谢谢。

Answer 1

如果你的逻辑必须明确遵循“仅当它出现在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选择器将不再明确地表达此逻辑，但它仍然可以工作。但是，如果你试图覆盖应用于这些元素的其他样式，那么特异性可能仍然是个问题。

Answer 2

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

然后给你想要样式生效的div，类名“Some distinctive ClassName”（可以更短），你已经准备好了

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

2 个答案: