双冒号(: :)在 CSS 中是什么意思?

双冒号(::)在 CSS 中是什么意思?

例如:

input[type=text]::-ms-clear { display: none; }
50943 次浏览

意思是 伪元素选择器。这意味着右侧的 元素在普通 DOM 中不存在,但是可以选择。

伪元素由两个冒号(: :)和伪元素的名称组成。

来源

它最初只是一个单一的结肠,但是被改变以区分它与 伪类(如 :hover:first-child:not等)。对于 beforeafter伪元素,最好使用 :,因为单个冒号有更好的浏览器支持,即在早期的 IE 版本中。

::操作符指示您正在选择一个 伪元素,这个 伪元素实际上并不作为元素存在,但仍然可以作为样式的目标。

这方面的例子包括一些特定于供应商的实现,比如你提供的 -ms-clear示例,大多数浏览器也有用于样式滚动条和其他原生 UI 元素的伪元素,但是也有很多 预定义的伪元素可以用于实际原因,比如 first-linefirst-letter

:before:after伪元素甚至允许您使用带有 content规则的 CSS 将实际内容插入页面。

CSS3改变了选择伪元素的方式,因为 W3C 希望将类似 a:visited的伪类与类似 p::first-line的伪元素区分开来。参见 高级 CSS 选择器