2

例如我有一个 CSS 类：

.class1 {background-color: red;}

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

目前我正在这样做：

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

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

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

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

谢谢！

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

4

2 回答 2

2

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

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

我觉得如果有问题的 div 的排列方式不能与其他选择器模式更好地匹配（例如，CSS3 支持很多以前不可用的结构性伪类选择器：http:// www.w3.org/TR/selectors/#structural-pseudos，因此，如果带有要设置样式的子元素的 divclass1在其父元素的子元素中处于可预测的顺序/可预测的位置，您也许可以使用:nth-child()or 之一相关的伪类来选择必要的 div）。

或者，您可以研究如下使用 jQuery，但这需要运行时样式。

$("#div1, #div2, #div3").find(".class1").css("border", "1px solid");
于 2013-06-12T13:33:51.100 回答
0

这可能会奏效，但我认为不可能指定父级。您可以使用 not 伪类。顺便说一下，any 选择器是一个 *。例如：

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

或者

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

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

于 2013-06-12T14:16:06.907 回答