Sto cercando di usare Fuel UX . Ho copiato il suo esempio nella mia pagina web e ho scoperto che il css non poteva essere caricato. Dopo aver confrontato il mio HTML con l’HTML di esempio, ho trovato che l’HTML di esempio imposta una class globale:
L’aggiunta di questa linea alla testa del mio HTML risolve il problema con Fuel UX. Tuttavia aggiungendo questa impostazione globale si mescolano molti altri elementi sulla mia pagina. Come posso impostare questa class="fuelux" localmente ?
EDIT: Come ho capito class="fuelux" apre uno spazio dei nomi, e ora tutti i nomi sotto .fuelux è sotto lo spazio dei nomi globale. C’è un modo per evitare di aprire questo spazio fuelux nomi fuelux ?
Molte grazie!
Ecco l’html di un contenitore di alberi in Fuel UX:
Qual è il problema nell’uso di ? È come è progettato il foglio di stile. Ho preso uno snippet dal loro foglio di stile . Se segnate qualcosa qui …
.fuelux .clearfix { *zoom: 1; } .fuelux .clearfix:before, .fuelux .clearfix:after { display: table; line-height: 0; content: ""; } .fuelux .clearfix:after { clear: both; } .fuelux .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .fuelux .input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fuelux article, .fuelux aside, .fuelux details, .fuelux figcaption, .fuelux figure, .fuelux footer, .fuelux header, .fuelux hgroup, .fuelux nav, .fuelux section { display: block; } .fuelux audio, .fuelux canvas, .fuelux video { display: inline-block; *display: inline; *zoom: 1; } .fuelux audio:not([controls]) { display: none; }
Seleziona l’elemento che è annidato sotto l’elemento avente class di fuelux quindi è necessario dichiararlo sul tag per farlo funzionare.
Inoltre, il tag html non è considerato come il capo della pagina. È completamente normale e accetta di dichiarare una class sul tag html . Seleziona solo gli elementi che sono annidati all’interno della class di fuelux . Se vuoi ancora sbarazzarti di quella class, puoi usarla senza dichiarare alcun elemento, ma dovrai modificare il tuo foglio di stile. Devi rimuovere tutte le classi .fuelux prima dell’altra class annidata nelle tue regole CSS.
Lo stanno solo usando in modo che non sia in conflitto con le altre classi.
Come per il tuo commento, sto lanciando una dimostrazione qui, supponiamo che tu stia usando fuelux , e nel fuelux c’è una class chiamata .button e usano il colore rosso per quella class. Quindi, supponiamo che il contenitore div sia il tuo elemento html , selezionerà l’elemento interno nidificato usando questa regola.
.fuelux .button { color: red; }
dimostrazione
Ora assumiamo che tu abbia rimosso la class dal tag html quindi guarda cosa succede …
Demo 2
Non applicherà gli stili. Perché? Perché non c’è alcun elemento nidificato sotto .fuelux abbia una class di .button . Sì, hai .button ma non ha alcun elemento genitore con class .fuelux quindi fallisce.
Ultimo ma non meno importante, demo del conflitto. Supponiamo che tu abbia già una class chiamata .button , e dica che anche fuelux ha una class chiamata .button e dice che non hai usato class="fuelux" , piuttosto che ignorerà semplicemente la regola fuelux e userà la tua.
Demo di conflitto
Se stai dicendo che vuoi conservare la class fuelux da qualche parte e quindi non avrai bisogno di scriverlo ancora e ancora, allora non è ansible.
Un approccio potrebbe essere quello di creare uno script semplice e quindi scrivere un programma per aggiungere class=fuelx a capo di ogni pagina. Potrebbe essere fatto più facilmente inserendo l’intestazione in un file seprate e quindi includendola e quindi eseguendo lo script su quella pagina. Più facile, ora se la tua intestazione si trova in un file seprate non hai bisogno di uno script perché l’intestazione sarà inclusa in ogni file e quindi scrivi solo class=fuelx una sola volta.
Oppure puoi semplicemente rimuovere .fuelux class dal suo foglio di stile piuttosto che in questo modo il foglio di stile non cercherebbe alcuna class .fuelux e lo stile verrà applicato a tutti gli elementi che sono stati in primo luogo i sottoelementi di .fuelux .