MENO - Modifica dell'ordine dei selettori

Descrizione

Anteporre un selettore ai selettori ereditati (genitore) è utile quando si modifica l'ordine dei selettori. Ciò si ottiene posizionando&dopo il selettore. Ad esempio, quando utilizzi Modernizer, potresti voler specificare regole diverse a seconda delle funzionalità supportate.

Esempio

L'esempio seguente mostra l'uso della modifica dell'ordine dei selettori nel file LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "changing_selector_order.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <div class = "header">
         <div class = "menu">
            <h2>Welcome to TutorialsPoint</h2>
            <p>It is possible to reference the parent selector by using &(ampersand) operator.</p>
         </div>
      </div>
   </body>
</html>

Ora crea il file style.less .

style.less

.header {
   .menu {
      border-radius: 5px;
      border: 1px solid red;
      & {
         padding-left: 200px;
      }
   }
}

È possibile compilare il file style.less in style.css utilizzando il seguente comando:

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice:

style.css

.header .menu {
   border-radius: 5px;
   border: 1px solid red;
   padding-left: 200px;
}

Il .no-borderradius & il selettore anteporrà .no-borderradius al suo selettore genitore .header .menu

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file changing_selector_order.htm file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.