html - 嵌套的 CSS 选择器分组

Question

例如我有一个 CSS 类:

.class1 {background-color: red;}

但是当这个类嵌套在一组定义的(有点大)ID 为(#div1，#div2，#div3)的 div 中时，我需要一些特殊的样式..

目前我是这样完成的:

#div1 .class1, #div2 .class1, #div3 .class1 {border: 1px solid;}

我想知道是否有任何方法可以不必每次都列出类，因为选择器由于长选择器而变得非常大。所以在伪代码中:

ANY(#div1, #div2, #div3) Sub Element .class1 {border : 1px solid;}

这个例子让这个问题看起来毫无实际意义，但实际上影响更大。

谢谢!

编辑:我无法完全控制 HTML 代码，因为它将通过 Ajax 来自第 3 方。此外，我需要支持包括 IE8 在内的所有主流浏览器。

Answer 1

为什么不为有问题的 div 分配一个特定的类？然后你可以这样做:

.classForDivs123 .class1 {border: 1px solid;}

我觉得如果所讨论的 div 没有以其他选择器模式匹配得更好的方式排列，效果会最好(例如，CSS3 支持相当多的以前不可用的结构伪类选择器:http://www.w3.org/TR/selectors/#structural-pseudos ，因此如果带有要设置样式的子 class1 元素的 div 在其父元素的子元素中处于可预测的顺序/可预测的位置，您也许可以使用 :nth-child( ) 或相关伪类之一来选择必要的 div)。

或者，您可以考虑使用 jQuery，如下所示，但这需要运行时样式。

$("#div1, #div2, #div3").find(".class1").css("border", "1px solid");