Was wählt der '&' Selektor?

Question

In this Codepen gibt es einen CSS-Selektor &:hover Was passt dieser Selektor?

Answer 1

Ich glaube, das kaufmännische Und ist eine Sass Funktion. Aus der Dokumentation:

Referencing Parent Selectors: &

Manchmal ist es sinnvoll, eine verschachtelte Regel der Mutter Wähler in anderen Möglichkeiten als Standard zu verwenden. Zum Beispiel möchten Sie möglicherweise spezielle Stile für wenn dieser Selektor über oder für wenn der Körper Element eine bestimmte Klasse hat. In diesen Fällen können Sie explizit angeben, wo der Elternselektor mit dem Zeichen & eingefügt werden soll.

Answer 2

Genau. In Sass könnten Sie so etwas wie dieses ...

div { 
    background: green; 

    p { 
     background: red; 

     &:hover { 
      background: blue; 
     } 

     &:active { 
      background: blue; 
     } 
    } 
} 

... die, wenn sie zu CSS umgewandelt würde dies geworden:

div { 
    background: green; 
} 

div p { 
    background: red; 
} 

div p:hover { 
    background: blue; 
} 

div p:active { 
    blue; 
} 

Edit: von & zu schweben zu &: schweben

Answer 3

Eine Anwendung, die weniger bekannt ist, ist, dass Sie das kaufmännische Und-Zeichen am Ende eines Stils hinzufügen können, sodass der übergeordnete Selektor zum untergeordneten Element wird.

zB:

h3 
    font-size: 20px 
    margin-bottom: 10px 

.some-parent-selector & 
    font-size: 24px 
    margin-bottom: 20px 

wird,

h3 { 
    font-size: 20px; 
    margin-bottom: 10px; 
    } 

    .some-parent-selector h3 { 
    font-size: 24px; 
    margin-bottom: 20px; 
    } 

können Sie mehr über & Verwendung hier

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand