Esnek eleman siparişine göre bir öğe nasıl şekillendirilir?

Ekranın boyutuna bağlı olarak yeniden düzenlenmiş DIV içinde bazı elemanlar var. Bu elemanların her birini esnek kutu siparişine bağlı olarak farklı bir şekilde tasarlamak istiyorum. Medya sorguları bir çerçeve içerisindeyken, bunu yapmak için kendi medya sorgularımı yazmamayı tercih ediyorum; çünkü medya, medya sorgularının kırılma noktalarını değiştirdiğinde medya sorgularımı değiştirmeyi hatırlamak istemiyorum. + kardeş seçimini kullanmayı denedim, ancak görünüşe göre bu yalnızca esnek işaret oluşturma sırasına değil, orijinal işaretlemedeki öğelerin sırasına uygulanır. Bir öğeyi, oluşturulmuş DOM'de göründüğü sıraya göre şekillendirmenin herhangi bir yolu var mı?Esnek eleman siparişine göre bir öğe nasıl şekillendirilir?

kaynak

2015-09-15 Trevor

sayılı CSS değil stilleri ... elemanlarını seçer. Bir öğenin belirli bir stili olup olmadığını söyleyemez. Javascript'e ihtiyacın var. –

[CSS seçiciye göre style özniteliği] olası bir kopyası (http://stackoverflow.com/questions/8426882/css-selector-by-style-attribute) –

Mutlaka bir CSS stili seçicisi arıyorum. Bunu güvenilir bir şekilde yapmanın bir yolu olsaydı, bu benim problemimi çözer; Ancak, bu açıkça mümkün değil, bu yüzden bir öğeyi işlenen DOM'de göründüğü sıraya göre şekillendirmenin bir yolu olup olmadığını görmeye çalışıyorum. Bunu açıklığa kavuşturmak için soruyu güncelleyeceğim. – Trevor

Yorumlarda belirtildiği gibi, nth-child kullanamazsınız, çünkü stiller işlenmemiş DOM yerine gerçek DOM sırasına uygulanacaktır.

Bunu yapmak için işaretlemeye ekstra sınıflar eklemeniz gerekecektir. Dolayısıyla, nth-child kullanarak yeniden sipariş vermek yerine, ekstra sınıfları kullanarak yeniden sipariş verin. Bu Turp içinde

<div class="flexGrid"> 
    <div class="flexGrid__item flexGrid__item--alpha"></div> 
    <div class="flexGrid__item flexGrid__item--bravo"></div> 
    <div class="flexGrid__item flexGrid__item--charlie"></div> 
    <div class="flexGrid__item flexGrid__item--delta"></div> 
</div>

Daha detay: https://jsfiddle.net/pua5u8a4/1/

kaynak

2017-08-16 09:03:22 Martin

Esnek eleman siparişine göre bir öğe nasıl şekillendirilir?

cevap

İlgili konular