伪元素 - CSS(层叠样式表) 编辑
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。下例中的 ::first-line
伪元素可改变段落首行文字的样式。
/* 每一个 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
注意:与伪元素比较,pseudo-classes
能够根据状态改变元素样式。
语法
selector::pseudo-element { property: value; }
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
注意:按照规范,应该使用双冒号(::
)而不是单个冒号(:
),以便区分伪类和伪元素。但是,由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
标准伪元素索引
::after (:after)
::backdrop
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::grammar-error
::marker
::placeholder
::selection
::slotted()
::spelling-error
Browser | Lowest Version | Support of |
---|---|---|
Internet Explorer | 8.0 | :pseudo-element |
9.0 | :pseudo-element ::pseudo-element | |
Firefox (Gecko) | 1.0 (1.0) | :pseudo-element |
1.0 (1.5) | :pseudo-element ::pseudo-element | |
Opera | 4.0 | :pseudo-element |
7.0 | :pseudo-element ::pseudo-element | |
Safari (WebKit) | 1.0 (85) | :pseudo-element ::pseudo-element |
参见
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论