Question

例如我有一个CSS类：

.class1 {background-color: red;}

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

目前我正在完成这样的事情：

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

我想知道是否有任何方法不必每次都列出该类，因为选择器因长选择器而变得非常大。所以在psudocode中：

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

这个例子让这个问题看起来没什么问题，但实际上影响更大。

谢谢！

编辑：我没有完全控制HTML代码，因为它将来自第三方通过Ajax。此外，我需要支持所有主流浏览器，包括IE8。

Answer 1

为什么不将特定类分配给有问题的div？然后你可以这样做：

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

我觉得如果所讨论的div没有以其他选择器模式更好地匹配的方式排列（例如，CSS3支持以前不可用的相当多的结构伪类选择器），那将最有效：{ {3}}，所以如果要设置样式的子class1元素的div在其父元素的子元素中具有可预测的顺序/可预测位置，则可以使用:nth-child()或者一个选择必要的div的相关伪类。）

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

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

Answer 2

这可能会起作用，但我不认为可以指定父级。您可以使用非伪类。顺便说一下，任何选择器都是*。例如：

.ajaxcontainer *:not(span, img, a, #div4, #div5) .class1{border : 1px solid;}

或

.ajaxcontainer div:not(#div4, #div5) .class1{...}

希望这对你有用，否则JAB的jquery解决方案就可以解决问题。

CSS嵌套选择器分组

2 个答案: