这个操作符(::)在CSS中的意思是什么?(复制)

This question already has an answer here:

这个问题已经有了答案:

• What does the double colon (::) mean in CSS? 3 answers
• 在CSS中，双冒号是什么意思?3答案

I have seen CSS like Custom Scrollbars in WebKit

我在WebKit中看到了类似自定义滚动条的CSS。

body::-webkit-scrollbar {
    width: 10px;
    height: 13px;
    background-color: white;
    color: #EBEBEB;
    border:none;
}

This specifies CSS for WebKit browsers. But what does this operator (::) mean in CSS?

这为WebKit浏览器指定了CSS。但是这个操作符(::)在CSS中是什么意思呢?

Where can I find other such operators in CSS?

在CSS中我在哪里可以找到其他这样的操作符?

6 个解决方案

#1

It indicates that what follows is a "pseudo-element". From the CSS Selectors level 3 spec:

它表明后面是一个“伪元素”。来自CSS选择器第3级规范:

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

伪元素由两个冒号(::)组成，后面跟着伪元素的名称。

And a pseudo-element creates an "abstraction about the document tree":

一个伪元素创建了一个“关于文档树的抽象”:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

伪元素创建文档树的抽象，超出文档语言指定的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者引用否则无法访问的信息。伪元素还可以为作者提供一种方法来引用源文档中不存在的内容(例如:before和::伪元素提供对生成内容的访问)。

For example, the ::webkit-scrollbar pseudo-element provides a mechanism to refer to the webkit scrollbar, which would be otherwise inaccessible. Another example: the ::first-letter pseudo-element provides a way to refer to the first letter of an element (if it is not preceded by any other content).

例如，::webkit-scrollbar伪元素提供了一种机制来引用webkit scrollbar，否则它将无法访问。另一个例子:第一个字母的伪元素提供了一种方法来引用元素的第一个字母(如果它之前没有任何其他内容)。

#2

In css3 we use double colon(::) for pseudo-element & single colon(:) for pseudo-class

在css3中，我们对伪元素使用双冒号(:)，对伪类使用单冒号(:)

The single colon syntax (e.g. “:before” or “:first-child”) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements (yes, they’re different), in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.

单个的冒号语法(例如:“before”或“:first-child”)是在CSS3之前的所有CSS版本中用于伪类和伪选择器的语法。随着CSS3的引入，为了区分伪类和伪元素(是的，它们是不同的)，在CSS3中，所有伪元素都必须使用双冒号语法，所有伪类都必须使用单冒号语法。

Read this article http://www.impressivewebs.com/before-after-css3/

阅读本文http://www.impressivewebs.com/before-after-css3/

#3

It is used to define a pseudo-element. As an example from the documentation:

它用于定义一个伪元素。作为文件中的一个例子:

p::first-line { text-transform: uppercase }

This modifies the first line of p elements. There's no real DOM element that is selected, that is why it is a pseudo-element.

这修改了p元素的第一行。没有选择真正的DOM元素，这就是为什么它是一个伪元素。

In your case, it modifies scrollbars in WebKit within the body element:

在你的例子中，它在body元素中修改WebKit中的滚动条:

body::-webkit-scrollbar

There is no scrollbar element within your document but this still allows you to style scrollbars within your HTML page.

在文档中没有scrollbar元素，但这仍然允许在HTML页面中对scrollbar进行样式化。

#4

this operator is new add in CSS3.it's meaning Pseudo element.

这个操作符是CSS3中的新添加。伪元素的意义。

#5

Google is your friend here.

谷歌是你的朋友。

Pseudo-elements

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

伪元素创建文档树的抽象，超出文档语言指定的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者引用否则无法访问的信息。伪元素还可以为作者提供一种方法来引用源文档中不存在的内容(例如:before和::伪元素提供对生成内容的访问)。

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

伪元素由两个冒号(::)组成，后面跟着伪元素的名称。

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

这个::符号是由当前文档引入的，以便在伪类和伪元素之间建立区分。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的前一个冒号表示法(即:第一行，:第一个字母，:before和:after)。对于本规范中引入的新伪元素，不允许这种兼容性。

Found at http://www.w3.org/TR/css3-selectors

在http://www.w3.org/TR/css3-selectors找到

#6

Thought I'd add this since people are having difficulty understanding what it actually means:

我想我应该加上这一点，因为人们很难理解它的真正含义:

Basically it's a way to get a document to format in a way that wouldn't be possible using the markup that is present. A good example exists in the W3 spec:

基本上，它是一种使文档格式化的方法，而使用当前的标记是不可能的。W3规范中有一个很好的例子:

Here is the example for a ::first-letter pseudo element

下面是a::第一个字母伪元素的示例

The original HTML fragment

原始的HTML片段

<div>
<p>The first text.

The fictional markup after the pseudo element is applied

应用pseudo元素后的虚构标记。

<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.

As you can see - the original HTML specified a div and a p, but there is no way to format the first letter using standard CSS, so the pseudo elements were added, enabling the first letter to be modified

如您所见——原始的HTML指定了一个div和一个p，但是没有办法使用标准的CSS来格式化第一个字母，因此添加了伪元素，允许修改第一个字母

Psuedo elements allow you to do stuff like that..

Psuedo元素允许你做这样的事情。