Esiste comunque un LIE per applicare il selettore figlio immediato (>) nell'output?Selettore bambino immediato in LESS
Nel mio style.less, voglio scrivere qualcosa di simile:
.panel {
...
> .control {
...
}
}
e hanno meno di generare qualcosa di simile:
.panel > .control { ... }
UPDATE
In realtà, il codice in la domanda originale funziona bene. Puoi semplicemente restare con il selettore di bambini >.
Trovato la risposta.
.panel {
...
>.control {
...
}
}
Notare la mancanza di spazio tra ">" e ".", Altrimenti non funzionerà.
Non dubito che sia un bug se non funziona con uno spazio lì, a meno che non sia specificamente documentato. – BoltClock
Questo è solo uno scherzo del parser. Lo vede come un singolo selettore, quindi ottieni '.panel> .control'. –
Lo considero una funzionalità piuttosto che un bug. È molto più coerente quando lo usi in questo modo rispetto al "&". Penso che sia un codice più chiaro se usi solo "&" con pseudo-classi e non con le classi figlio. – Dave
Il modo ufficiale:
.panel {
& > .control {
...
}
}
& si riferisce sempre al selettore corrente.
Vedi http://lesscss.org/features/#features-overview-feature-nested-rules
Penso che questo sia anche solo prendere in giro il parser (come hai sentito per l'altra risposta). Lasciatemi spiegare. Come hai detto tu, e si riferisce sempre al selettore corrente (padre). Quindi qualunque cosa sia dopo dovrebbe ** applicare ** al genitore. E questo è il ruolo delle pseudo-classi. Le classi figlie più imminenti sono più vicine alle classi figlio **** gasp **** piuttosto che alle pseudo-classi. Quindi usare solo> è più intuitivo e logico. – Dave
Cosa pensi sia più corretto? 'div> p' o' div> p'? Il '&' combinatore è il modo canonico di farlo in MENO, non i miei sentimenti. La tua spiegazione è retorica. Alcune persone scrivono i loro CSS in una singola riga ... –
La maggior parte delle persone usa MENO in modo che non debbano preoccuparsi del CSS effettivo generato. Comunque, si scopre che lo spazio può essere usato dopo>. Quindi è puramente ridondante. – Dave
Inoltre, se si prendono di mira il primo elemento figlio, come ad esempio il primo <td> di un <tr>, si potrebbe usare qualcosa di simile:
tr {
& > td:first-child {font-weight:bold;}
}
questo aiuta a ridurre dichiarazioni di classe quando non sono necessari
La sintassi corretta sarebbe il seguente durante l'utilizzo di '&' sarebbe ridondante qui.
.panel{
> .control{
}
}
Secondo less guidelines, '&' viene usato per parametrizzare gli antenati (ma non c'è tanto bisogno qui). In this less example, &: il passaggio del mouse è essenziale su : al passaggio del mouse altrimenti si otterrebbe un errore sintattico. Tuttavia, non esiste un tale requisito sintattico per l'utilizzo di "&" qui. Altrimenti tutti i raggruppamenti richiederebbero "&" in quanto si riferiscono essenzialmente al genitore.
@JJF nessuna domanda perché è una risposta? –
http://stackoverflow.com/questions/7634932/less-js-strong-nested-rules-rules – thirtydot
In modo divertente, lo snippet nella tua domanda era già la risposta giusta. – thirtydot
@thirtydot Sicuro, tranne che non funziona ... non se non rimuovi lo spazio o aggiungi "&". Sto usando less.js. Non posso dire con certezza per altri parser. – Dave