Question

这样的CSS

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

这为WebKit浏览器指定了CSS。但是这个运算符（：:)在CSS中意味着什么？

我在哪里可以找到CSS中的其他此类运算符？

Answer 1

它表明接下来是“伪元素”。来自CSS Selectors level 3 spec：

伪元素由两个冒号（：:)后跟名称伪元素。

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

伪元素创建有关文档树的抽象文档语言指定的那些。例如，文件语言不提供访问第一个字母或第一个字母的机制元素内容的一行。 伪元素允许作者参考这个否则无法访问的信息。伪元素也可能为作者提供了一种引用内容中不存在的内容的方法源文档（例如，:: before和:: after伪元素给出访问生成的内容）。

例如，::webkit-scrollbar伪元素提供了一种引用webkit滚动条的机制，否则将无法访问该滚动条。另一个例子：::first-letter伪元素提供了一种引用元素的第一个字母的方法（如果它没有任何其他内容）。

Answer 2

在css3中，我们使用双冒号（：:)表示伪元素＆amp;单个冒号（:)表示伪类

单冒号语法（例如“：before”或“：first-child”）是语法用于所有伪类和伪选择器 CSS3之前的CSS版本。随着CSS3的推出，按顺序在伪类和伪元素之间进行区分（是的，它们是不同的），在CSS3中，所有伪元素都必须使用双冒号语法，所有伪类必须使用单冒号语法。

阅读这篇文章http://www.impressivewebs.com/before-after-css3/

Answer 3

用于定义pseudo-element。作为文档中的一个例子：

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

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

在您的情况下，它会在body元素中修改WebKit中的滚动条：

body::-webkit-scrollbar

您的文档中没有滚动条元素，但这仍然允许您在HTML页面中设置滚动条的样式。

Answer 4

这个运算符是CSS3中的新增加。这意味着伪元素。

Answer 5

Google是你的朋友。

伪元素

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

伪元素由两个冒号（：:)后跟伪元素的名称组成。

当前文档引入了这个::符号，以便在伪类和伪元素之间建立区分。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的先前单冒号表示法（即：first-line，：first-letter，：before和：after）。本规范中引入的新伪元素不允许这种兼容性。

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

Answer 6

以为我会添加这个，因为人们很难理解它的实际含义：

基本上，这是一种使文档格式化的方式，使用现有的标记是不可能的。 W3规范中存在一个很好的例子：

以下是:: first-letter伪元素的示例

原始HTML片段

<div>
<p>The first text.

应用伪元素后的虚构标记

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

正如您所看到的 - 原始HTML指定了div和p，但是没有办法使用标准CSS格式化第一个字母，因此添加了伪元素，从而可以修改第一个字母

Psuedo元素允许你做那样的事情..

CSS中的这个运算符（：:)是什么意思？

6 个答案:

伪元素