CSS 中的这个运算符 (::) 是啥意思？ [复制]

Posted 2023-03-06

【中文标题】CSS 中的这个运算符 (::) 是啥意思？ [复制]

【英文标题】：What does this operator (::) in CSS mean? [duplicate]CSS 中的这个运算符 (::) 是什么意思？ [复制]

【发布时间】：2012-07-06 18:23:41

【问题描述】：

我见过像Custom Scrollbars in WebKit这样的CSS

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

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

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

【问题讨论】：

double colon notation

CSS 在选择器中没有“运算符”的概念——它只是碰巧使用某些特殊字符来表示不同类型的选择器。例如，. 代表一个类，# 一个 ID，+ 代表下一个兄弟姐妹，> 代表孩子。

【参考方案1】：

Google 是你的朋友。

伪元素

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

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

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

发现于http://www.w3.org/TR/css3-selectors

【参考方案2】：

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

基本上，这是一种让文档格式化的方法，而使用现有的标记是不可能的。 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 元素允许你做这样的事情..

【讨论】：

我发现这是最好的答案，因为您演示了语法，分解了步骤，并解释了正在发生的事情。此外观上方的“最佳答案”是从 Google 逐字复制的。我不喜欢专家这样做，因为如果没有简明的语法演示和/或逐步分解的视觉解释，手册和高级功能通常没有多大意义。我只是想感谢您花时间看到我们中的很多人都在努力并花时间澄清！更多应该以您为榜样，因为我们正在学习并感谢您的指导！

【参考方案3】：

这个操作符是 CSS3 中新增的，意思是伪元素。

【参考方案4】：

在 css3 中，我们使用双冒号（::) 表示 pseudo-element 和单冒号（:) 表示 pseudo-class

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

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

【参考方案5】：

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

p::first-line  text-transform: uppercase 

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

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

body::-webkit-scrollbar

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

【参考方案6】：

表示后面是“伪元素”。来自CSS Selectors level 3 spec：

伪元素由两个冒号 (::) 后跟 伪元素。

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

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

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

【讨论】：

想解释一下这是什么意思？ :)

伪元素是什么意思？

表示“不是真正的元素”，例如CSS 尝试使用指定选择器选择的内容在 DOM 中并不真正存在

Pseudo 表示半真实。因此，它不可能是完全真实的，即该元素未在文档源中指定。