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

Question

我正在研究 css 和排版，并且运行研究伪选择器这个有趣的概念。我使用过单冒号伪选择器，但不熟悉伪选择器的双冒号版本。 I understand 双冒号被称为伪元素而不是伪选择器 - 但为什么呢？有什么区别？

我也明白单冒号支持多了，那什么情况下会用双冒号伪元素呢？是否存在需要双冒号而单冒号无法完成工作的用例？那可能是什么情况？

"Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain."（引自 link）——我不知道 'selector chain' 是什么，但这似乎也是双冒号方法的另一个限制。如果（在我的理解中）只是一个不太受支持的单冒号版本，为什么我需要使用双冒号？

编辑：它们在功能上似乎不同：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

Pseudo-类 (:) 允许您设置元素的不同状态的样式，例如当您将鼠标悬停在它上面时，当它被禁用时，当它是其父项的第一个子项时，等等。

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

最初他们都使用一个冒号，但是CSS3引入了双冒号来分隔两者。

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

CSS " :: " vs " : " -- pseudo-element vs pseudo-selector?

html

css

css-selectors