問題描述

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.

這篇關于偽類和偽元素有什么區別?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！