twitter bootstratp的源代码，:：在-webkit-input-placeholder前面-是打字错误吗？

Question

推特bootstrap.css有这样一个代码：

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

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

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

这个问题是关于-webkit-input-placeholder面前的::的。为什么有两个::？这是做什么用的？

Answer 1

::表示伪元素(例如::before和::after)。:表示伪类(例如:link和:hover)。这只是一个区分伪元素和伪类的命名约定。IE8及更低版本不支持::约定。

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

Answer 2

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

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

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

这也改变了它的样式，不仅仅是语法。在Chrome和火狐浏览器中看看这个：http://jsfiddle.net/UxAY6/

当在webkit中查看该小提琴时，红色边框位于文本字段内。它在文本字段中设置占位符伪元素的样式。但是在Firefox中，它是input元素的伪类，所以当文本字段显示占位符时，边框会应用于文本字段。