Ho alcuni elementi all'interno di uno DIV che vengono riordinati a seconda delle dimensioni dello schermo. Voglio modellare ciascuno di questi elementi in modo diverso a seconda del loro ordine di flessione. Poiché le query multimediali sono all'interno di un framework, preferisco non scrivere le mie query multimediali per fare ciò, perché non voglio dover ricordare di cambiare le mie query multimediali se il framework cambia i punti di interruzione per le loro query multimediali. Ho provato a utilizzare il selettore di pari livello +, ma a quanto pare questo si applica solo all'ordine degli elementi nel markup originale, non all'ordine di rendering della casella flessibile. C'è un modo per disegnare un elemento in base all'ordine in cui appare nel DOM renderizzato?Come stile un elemento basato sul suo ordine di box flessibile
9
A
risposta
0
Come menzionato nei commenti, non si sarà in grado di utilizzare nth-child, poiché gli stili si applicano all'ordine del DOM effettivo, non al DOM renderizzato.
Per eseguire questa operazione è necessario aggiungere ulteriori classi al codice. Quindi, piuttosto che riordinare usando nth-child, riordinare usando le classi extra.
<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>
Altro dettaglio in questo violino: https://jsfiddle.net/pua5u8a4/1/
Problemi correlati
- 1. Elemento HTML di stile basato sul titolo con CSS
- 2. Come impedire a un elemento flessibile di restringersi rispetto al suo contenuto?
- 3. Ridimensiona programmaticamente un UIViewController basato sul suo contenitore
- 4. Riorganizzare un elenco basato sul dato ordine in C#
- 5. Come impedire ai contenuti di ridimensionare un elemento flessibile?
- 6. Impostazione di un colore basato sul tema
- 7. Come posso "ripristinare" la proprietà di un controllo sul suo valore di stile originale (come Sfondo)
- 8. jQuery select basato sul testo
- 9. Xpath come selezionare un elemento basato su un ordine e dipendente dalla sua esistenza
- 10. Come escludere il primo elemento in un involucro flessibile?
- 11. Come posso ridurre un elemento flessibile attorno a un intervallo con testo inserito?
- 12. Stile un elemento basato sulla sua posizione all'interno di un gruppo
- 13. Come inserire un elemento nell'elenco in ordine?
- 14. Come interrompere la linea in un layout flessibile?
- 15. Iniettore semplice: registrazione di un tipo con argomento costruttore basato sul suo genitore
- 16. ordine di sovrascrittura stile css?
- 17. Come creare uno stile basato sullo stile DataGrid predefinito?
- 18. elemento di stile JavaScript
- 19. Ruby: utilizzando un'espressione regolare per trovare e aprire un file basato sul suo nome file?
- 20. Come eseguire un ordine basato sui valori in MongoDB?
- 21. Come creare uno stile basato sullo stile predefinito?
- 22. Posizione ultimo elemento flessibile all'estremità del contenitore
- 23. posizione elemento in ordine di
- 24. Ordine attributo elemento elementare
- 25. Come ottenere i valori di stile di un elemento HTML in javascript?
- 26. Come impedire l'evento di clic genitore quando l'utente fa clic sul suo elemento figlio? AngularJS
- 27. Firefox e FlexBox - Quando si utilizza white-space: nowrap sul elemento figlio casella flessibile rompe
- 28. confusione sul vuoto e sul suo significato.
- 29. IDE basato sul Web IDE
- 30. C'è un modo per usare due ombre di box CSS3 su un elemento?
No. CSS seleziona gli elementi ... non stili. Non può sapere se un elemento ha uno stile specifico o no. Avresti bisogno di Javascript. –
possibile duplicato di [selettore CSS per attributo di stile] (http://stackoverflow.com/questions/8426882/css-selector-by-style-attribute) –
Non sono necessariamente alla ricerca di un selettore di stili CSS. Capisco, se ci fosse un modo per farlo in modo affidabile, che avrebbe risolto il mio problema; tuttavia, ovviamente non è possibile, quindi sto provando a vedere se c'è un modo per disegnare un elemento in base all'ordine in cui appare nel DOM renderizzato. Aggiornerò la domanda per chiarire questo. – Trevor