問題描述

div::after {} 和 div:after {} 有什么區(qū)別?我們什么時(shí)候必須使用 :: 而不是 :?

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

雙冒號和單冒號是為了區(qū)分偽類和偽元素.

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

上述語句的實(shí)際含義是什么?

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 偽類是一個(gè)關(guān)鍵字，前面有一個(gè)冒號 (:)，添加到選擇器的末尾以指定您要設(shè)置所選元素的樣式，并且 僅當(dāng)它們處于特定狀態(tài)時(shí).例如，您可能希望僅在鼠標(biāo)指針懸停時(shí)設(shè)置元素的樣式，或者在禁用或選中復(fù)選框時(shí)設(shè)置樣式，或者在 DOM 樹中作為其父元素的第一個(gè)子元素.

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()
• :第一
• :懸停

偽元素 ::

偽元素與偽類非常相似，但它們有區(qū)別.它們是關(guān)鍵字，這一次前面有兩個(gè)冒號 (::)，可以添加到選擇器的末尾以選擇元素的某個(gè)部分.

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:

在實(shí)踐中 ::before 用作 :before 和 ::after 用作 :after因?yàn)闉g覽器兼容性.兩者都是偽元素，但可能看起來像偽類.如果您閱讀 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.

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