4

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

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

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

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

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

4

2 回答 2

4

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

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

于 2012-08-03T15:46:24.107 回答
2

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

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

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

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

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

于 2012-08-03T16:09:46.513 回答