伪类和伪元素之间有什么区别? [英] What is the difference between pseudo-classes and pseudo-elements?

问题描述

div::after {}和div:after {}有什么区别?何时必须在:上使用::?

What is the different between div::after {} and div:after {} ? When do we have to use :: over :?

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

Double colon and single-colon notation is to distinguish between pseudo-classes and pseudo-elements.

以上陈述的实际含义是什么?

What is the actual meaning of the above statement?

推荐答案

来自 伪类:

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

示例:

• :活动
• :已选中
• :nth-​​child()
• :第一
• :悬停

伪元素::

伪元素与伪类非常相似，但是它们有所不同.它们是关键字，这次是两个冒号(::)开头，可以将其添加到选择器 的末尾以选择元素的特定部分 .

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

示例:

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

如@stephanmg所述:

As stated by @stephanmg:

在实践中，:: before用作:before，而:: after用作:after 由于浏览器的兼容性.两者都是伪元素，但可能 看起来像伪类.如果您阅读CSS，这可能会造成混淆 代码.

In practice ::before is used as :before and ::after is used as :after because of browser compatibility. Both are pseudo-elements, but may look like pseudo classes. This might be confusing if you read CSS code.

这篇关于伪类和伪元素之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！