CSS"::"vs":" - 伪元素vs伪选择器？

Question

我正在研究CSS和排版,并遇到了这个有趣的伪选择器概念.我使用了单冒冒伪选择器,并且不熟悉psuedo选择器的双冒号版本.我知道双冒号被称为伪元素而不是伪选择器 - 但为什么呢？有什么区别？

我也明白单个冒号更受支持,所以在什么情况下会使用双冒号伪元素？是否有必要使用双冒号的用例,单个冒号不能完成工作？这种情况会是什么？

"与伪元素不同,伪类可以出现在选择器链的任何地方." (引自链接) - 我不知道'选择链'是什么,但这似乎也是双冒号方法的另一个限制.为什么我需要使用双冒号(如果我的理解)只是一个较少支持的单冒号版本？

编辑:它们看起来在功能上并不相同:小提琴

<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

Pseudo-classes(:)允许您设置元素的不同状态的样式,例如当您将鼠标悬停在它上面时,禁用它时,它是父元素的第一个子节点等.

伪元素(::)允许您设置元素的不同部分的样式,例如第一行,第一个字母,插入内容之前或之后的内容等.

最初他们都使用了单个冒号,但CSS3引入了双冒号来分隔两者.