html - twitter bootstratp 的来源， :: 在 -webkit-input-placeholder 前面 - 这是一个错字吗？

Question

Twitter bootstrap.css 有这样一段代码：

:-moz-placeholder {
  color: #999999;
}

:-ms-input-placeholder {
  color: #999999;
}

::-webkit-input-placeholder {
  color: #999999;
}

问题是关于::前面的-webkit-input-placeholder。为什么是两个::，那是为了什么？

score 4 · Accepted Answer

::表示伪元素（例如::before和::after）。:表示一个伪类（例如:link和:hover）。这只是区分伪元素和伪类的命名约定。IE8 及以下不支持该::约定。

这是直接来自 W3C 规范的对这两个的解释：http: //www.w3.org/TR/CSS21/selector.html#pseudo-elements

score 2 · Accepted Answer

:是一个伪类。这是对现有元素的修改。 :hover，例如，表示相同的元素，但鼠标指针悬停在它上面。 :focus当光标位于表单元素中时。

::用于伪元素，它们不是您正在设计的元素的直接部分。相反，它们是 DOM 上不存在但无论如何都可以设置样式的元素。 ::after就是一个很好的例子，因为你可以创建一个实际上并不存在的元素样式。

然而，通常情况下，浏览器供应商似乎存在一些误解的灰色地带。IE 和 Firefox 似乎认为占位符是一个伪类，webkit 将其视为伪元素。

不过，这也改变了它的样式，不仅仅是语法。在 Chrome 和 Firefox 中查看：http: //jsfiddle.net/UxAY6/

在 webkit 中查看该小提琴时，红色边框位于文本字段内。它在文本字段内设置占位符伪元素的样式。但在 Firefox 中，它是输入元素的伪类，因此边框在显示占位符时适用于文本字段。

2 回答 2