Twitter bootstrap.css 有这样一段代码:
:-moz-placeholder {
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}
::-webkit-input-placeholder {
color: #999999;
}
问题是关于::
前面的-webkit-input-placeholder
。为什么是两个::
,那是为了什么?
Twitter bootstrap.css 有这样一段代码:
:-moz-placeholder {
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}
::-webkit-input-placeholder {
color: #999999;
}
问题是关于::
前面的-webkit-input-placeholder
。为什么是两个::
,那是为了什么?
::
表示伪元素(例如::before
和::after
)。:
表示一个伪类(例如:link
和:hover
)。这只是区分伪元素和伪类的命名约定。IE8 及以下不支持该::
约定。
这是直接来自 W3C 规范的对这两个的解释:http: //www.w3.org/TR/CSS21/selector.html#pseudo-elements
:
是一个伪类。这是对现有元素的修改。 :hover
,例如,表示相同的元素,但鼠标指针悬停在它上面。 :focus
当光标位于表单元素中时。
::
用于伪元素,它们不是您正在设计的元素的直接部分。相反,它们是 DOM 上不存在但无论如何都可以设置样式的元素。 ::after
就是一个很好的例子,因为你可以创建一个实际上并不存在的元素样式。
然而,通常情况下,浏览器供应商似乎存在一些误解的灰色地带。IE 和 Firefox 似乎认为占位符是一个伪类,webkit 将其视为伪元素。
不过,这也改变了它的样式,不仅仅是语法。在 Chrome 和 Firefox 中查看:http: //jsfiddle.net/UxAY6/
在 webkit 中查看该小提琴时,红色边框位于文本字段内。它在文本字段内设置占位符伪元素的样式。但在 Firefox 中,它是输入元素的伪类,因此边框在显示占位符时适用于文本字段。