伪类和伪元素有什么区别？

Question

div::after {}和之间有什么不同div:after {}？我们什么时候需要使用::过:？

双冒号和单冒号表示法用于区分伪类和伪元素.

上述陈述的实际含义是什么？

Answer 1

来自https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

伪类:

CSS伪类是一个关键字,以冒号(:)开头,添加到选择器的末尾以指定要为所选元素设置样式,并且仅当它们处于特定状态时.例如,您可能希望仅在鼠标指针悬停元素时设置样式,或者在禁用或选中它时使用复选框,或者在DOM树中将其作为父元素的第一个子元素.

例子:

• :活性
• :检查
• :第n个孩子()
• :第一
• :徘徊

伪元素::

伪元素非常类似伪类,但它们有差异.它们是关键字,这次前面有两个冒号(::),可以添加到选择器的末尾以选择元素的某个部分.

例子:

• ::后
• ::之前
• ::第一个字母
• ::第一行
• ::选择
• ::背景

Answer 2

伪类: 它由浏览器自动应用,具体取决于元素的位置或其交互状态.

例如 :

E:hover 当光标悬停在E上时,匹配E类型的元素.

伪元素: 它根据内容在HTML层次结构中的位置将样式应用于内容.

例如 :

E::first-letter 这将样式应用于块级元素E内第一行的第一个字母.

所以,

CSS3选择器规范为伪元素添加前缀,而不是一个冒号.所以,:第一个字母变成::第一个字母,第一个字母变成::第一个字母.IE 8及更早版本不理解双冒号前缀,因此您需要使用单冒号版本以避免旧版浏览器中的样式中断.