CSS “ :: ” vs “ : ” — pseudo-element vs pseudo-sel

问题:

This question already has an answer here:

• Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements? 3 answers
• What is the difference between a pseudo-class and a pseudo-element in CSS? 8 answers

I'm researching css and typography, and ran into this intriguing concept of pseudo-selectors. I have used single colon psuedo selectors and am unfamiliar with the double colon version of the psuedo selectors. I understand that double colon is called a pseudo-element instead of a pseudo-selector - but why? And what is the difference?

I also understand that single colon is much more supported, so in what situation would one use the double colon pseudo-element? Are there use cases where double colon would be necessary, and single colon would not get the job done? what might that situation be?

"Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain." (quote from link) - I don't know what 'selector chain' is, but this also seems like yet another limitation of the double colon approach. Why would I need to use double colon if it is (in my understanding) just a less supported version of single colon?

edit: they appear not to be functionally the 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;
}

回答1:

Pseudo-classes (:) allow you to style the different states of an element e.g. when you hover over it, when it is disabled, when it is the first child of its parent, etc.

Pseudo-elements (::) allow you to style different parts of an element e.g. the first line, the first letter, inserting content before or after, etc.

Originally they all used a single colon, but CSS3 introduced the double colon to separate the two.