CSS 伪类和伪元素有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41867664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between pseudo-classes and pseudo-elements?
提问by Alice
What is the different between div::after {}and div:after {}? When do we have to use ::over :?
div::after {}和之间有什么区别div:after {}？我们什么时候必须使用::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?
上述声明的实际含义是什么？
采纳答案by Bas van Dijk
Pseudo-class :
伪类：
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.
CSS 伪类是一个关键字，前面有一个冒号 (:)，添加到选择器的末尾以指定您要设置所选元素的样式，并且仅当它们处于特定状态时。例如，您可能希望仅当元素被鼠标指针悬停时设置样式，或者当它被禁用或选中时一个复选框，或者一个元素是其父元素在 DOM 树中的第一个子元素。
Examples:
例子：
- :active
- :checked
- :nth-child()
- :first
- :hover
- ：积极的
- :检查
- :nth-child()
- ：第一的
- ：徘徊
Pseudo-elements ::
伪元素::
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.
伪元素与伪类非常相似，但它们有区别。它们是关键字，这次前面有两个冒号 (::)，可以添加到选择器的末尾以选择元素的某个部分。
Examples:
例子：
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
- ::backdrop
- ：：后
- ：：前
- ::第一封信
- ：：第一行
- ::选择
- ：：背景
As stated by @stephanmg:
正如@stephanmg 所说：
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.
在实践中 ::before 用作 :before 并且 ::after 用作 :after 因为浏览器兼容性。两者都是伪元素，但可能看起来像伪类。如果您阅读 CSS 代码，这可能会令人困惑。
回答by Ehsan
Pseudo-classes :it is applied automatically by the browser depending on the position of the element or its interactive state.
伪类：它由浏览器根据元素的位置或其交互状态自动应用。
For Example :
例如 ：
E:hoverMatches elements of type E when the cursor is
hovering over it.
E:hover当光标悬停在 E 类型元素上时匹配它。
Pseudo-elements :It is applies styles to content based on its position in the HTML hierarchy.
伪元素：根据内容在 HTML 层次结构中的位置将样式应用于内容。
For Example :
例如 ：
E::first-letterThis applies a style to the first letter of the first line inside a block-level
element E.
E::first-letter这将样式应用于块级元素 E 内第一行的第一个字母。
So ,
所以 ，
The CSS3 Selectors specification prefixes pseudo-elements with two colons instead of one. So, :first–letter becomes ::first-letter and :first-line becomes ::first-line. IE 8 and earlier don't understand the double-colon prefix, so you need use the single-colon versions to avoid styles breaking in older browsers.
CSS3 Selectors 规范用两个冒号而不是一个冒号作为伪元素的前缀。所以， :first–letter 变成 ::first-letter ， :first-line 变成 ::first-line 。IE 8 及更早版本不理解双冒号前缀，因此您需要使用单冒号版本以避免在旧浏览器中破坏样式。
