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 回答