CSS "::" vs ":" - pseudoelement vs pseudo-selektor?

Question

Badam css i typografię, i wpadłem na tę intrygującą koncepcję pseudo-selektorów. Użyłem selektorów psuedo z pojedynczymi dwukropkami i jestem obeznany z wersją podwójnego dwukropka selektorów psuedo. I understand, że podwójny dwukropek jest nazywany pseudoelementem zamiast pseudo-selektora - ale dlaczego? I jaka jest różnica?

Rozumiem również, że pojedynczy dwukropek jest znacznie bardziej obsługiwany, więc w jakiej sytuacji użyłbyś pseudoelementu dwukropka? Czy są przypadki użycia, w których dwukropek byłby konieczny, a pojedynczy dwukropek nie wykonałby tej pracy? jaka może być ta sytuacja?

"W przeciwieństwie do pseudoelementów, pseudoklasy mogą pojawiać się w dowolnym miejscu łańcucha selektora." (cytat z linku) - nie wiem, czym jest "łańcuch selekcyjny", ale wydaje się to również kolejnym ograniczeniem podejścia dwukropka. Dlaczego musiałbym używać podwójnego dwukropka, jeśli jest to (w moim rozumieniu) tylko mniej obsługiwana wersja pojedynczego dwukropka?

edit: nie wydają się być funkcjonalnie takie same: fiddle

<div><p>First Line</p></div> 
<div><p>Second Line</p></div> 

css

div:nth-child(1) > p { 
    color: green; 
} 

div::nth-child(2) > p { 
    color: blue; 
} 

Answer 1

Pseudoklasy (:) pozwalają projektować różne stany elementu np gdy najedziesz na niego, kiedy zostanie wyłączone, kiedy będzie pierwszym dzieckiem jego rodzica itd.

Pseudoelementy (::) pozwalają na stylizację różnych części elementu, np. pierwszy wiersz, pierwsza litera, wstawianie treści przed lub po itp.

Pierwotnie wszystkie one używały pojedynczego dwukropka, ale CSS3 wprowadził podwójny dwukropek, aby oddzielić dwa.