CSS選擇運算嵌套

例如我有一個CSS類分組：CSS選擇運算嵌套

.class1 {background-color: red;}

但是，當這個類嵌套在定義（有點大）組與ID的div（＃DIV1，＃DIV2，＃的內部DIV3）我需要一些特殊的造型..

目前我正在完成這樣的：

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

我想知道是否有什麼辦法可以不必每次都列出班級爲選擇器變得非常由於長選擇器大。所以在psudocode：

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

這個例子使問題看起來很有意義，但實際上有更多的影響。

謝謝！

編輯：我沒有HTML代碼的完全控制，因爲它將通過Ajax從第三方發送。另外，我需要支持所有主流瀏覽器，包括IE8。

來源

2013-06-12 Matt Klooster

我不認爲在CSS中有這樣的東西。至少我一直對此感到沮喪，很多很多次...... –

你可以在它周圍添加一個跨度，就像這樣：'＃span1 .class1 {styling}' – ErikMes

@ErikMes - 不，你不能。 Span元素不能包含div元素。 – Quentin

爲什麼不將特定的類分配給相關的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");

來源

2013-06-12 13:33:51 JAB

爲好主意而投票。但是我忘了提到HTML是通過Ajax從第三方傳出的。我不得不支持回到IE8，所以我懷疑我能夠使用任何流血的邊緣CSS3：（。 –

@MattKlooster你使用的是什麼Ajax框架？如果它是jQuery，你可以繼續使用我的最後一個建議，但是即使不是，我敢肯定其他框架有類似的方式來做這樣的過濾 – JAB

我個人儘量避免使用JS的樣式。在這種情況下，我有它與CSS的工作我只是想找一種方法來減少我的 –

這可能會訣竅，但我不認爲有可能指定父。你可以使用not僞類。任何選擇器都是*。例如：

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

或

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

希望這會爲你別的JAB的jQuery的解決方案會做的伎倆工作。

來源

2013-06-12 14:16:06 rofavadeka

除了這樣做的優點之外，IE8不支持：不是，他需要支持IE8。 –

CSS選擇運算嵌套

回答

相關問題