Co to jest & :: before, & :: after w CSS?

Question

Chciałem utworzyć pionową linię czasu i natknąłem się na tę stronę.

http://cssdeck.com/labs/oz2nu681

i skopiował kod i istnieje kilka rzeczy, które mam problemy z.

• & :: po
• & :: przed
• .radio: sprawdzone; & + .relative;

Próbowałem go zmienić na kod arkusza stylów, ale utknąłem tutaj. Również kod css różni się od tradycyjnego pliku css. Co to za kod i jak go używać?

Answer 1

&::after jest faktycznie nic w CSS, ale jest to cecha Sass/SCSS i prawdopodobnie napisany w kontekście takim jak ten:

li { 
    /* some style 1 */ 

    &::after { 
    /* some style 2 */ 
    } 

} 

które kompiluje do:

li { /* some style 1 */ } 
li::after { /* some style 2 */ } 

Zasadniczo, ampersand w SASS ściąga selektor nadrzędny, gdy kompiluje się do CSS.

EDIT Nie można używać znaku handlowego w pliku .css, ponieważ nie ma żadnego znaczenia, można go używać tylko w plikach Sass/SCSS które zostały skompilowane przy użyciu CSS Sass pre-procesor.

Blog post (nie moje) o ampersand w SASS:

http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/

EDIT 2 Dalsze odpowiedzi:

Wszystko inne jest wanilia CSS, ::after, ::before są pseudo elements, .relative i .radio to class selectors, :checked to pseudo class dla danych wejściowych Radio pes i wyboru, a + jest adjacent sibling selector

MDN powinny być (jeden) swoich organów do dokumentacji CSS, więc wybrałem się na link do ich strony, zamiast po prostu skopiować i wkleić zawartość swoich dokumentów w tej odpowiedzi.