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

问题描述

div::after {} 和 div:after {} 有什么区别?我们什么时候必须使用 :: 而不是 :?

What is the difference 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?

推荐答案

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

伪类:

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

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

例子:

• :活跃
• :勾选
• :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屋！