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

【问题标题】：Source of twitter bootstratp, :: in front of -webkit-input-placeholder - is that a typo?twitter bootstratp 的来源， :: 在 -webkit-input-placeholder 前面 - 这是一个错字吗？
【发布时间】：2012-08-01 16:37:02
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap placeholder

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：