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

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

如果您的逻辑必须明确遵循“仅当 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 选择器将不再显式表达这个逻辑，但它仍然有效。但是，如果您试图覆盖应用于这些元素的其他样式，特异性可能仍然是一个问题。