本文已参与掘金创作者训练营第三期「话题写作」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力
伪元素官方是怎么解释的?
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。
常见的伪元素有哪些呢?
- ::after:创建一个伪元素,作为已选中元素的最后一个子元素
- ::before:创建一个伪元素,其将成为匹配选中的元素的第一个子元素
- ::cue:匹配所选元素中的WebVTT提示
- ::first-letter:选中某块级元素第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)
- ::first-line:在某块级元素的第一行应用样式
- ::selection:应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)
- ::slotted:用于选定那些被放在 HTML 模板中的元素
温馨提示:以下的伪元素是实验中的功能。这些功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于这些功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中这些功能的语法和行为可能随之改变。
::backdrop
::backdrop 作用于任何处于全屏模式的元素下的元素。
比如我们将视频全屏显示时的背景颜色改为白色(默认黑色)。
video::backdrop {
background-color: #fff;
}
效果如下:
::grammar-error 和 ::spelling-error
::grammar-error 应用于浏览器标识为语法错误的文本段。
::spelling-error 应用于浏览器标记为拼写不正确的文本段。
::marker
::marker 可以为列表项的标记设置样式。
<!DOCTYPE html>
<html>
<head>
<style>
// 重点...
::marker {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
效果如下:
::placeholder
::placeholder 作用于一个表单元素的占位文本。
<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
color: yellow;
font-size: 1.2em;
font-style: italic;
}
</style>
</head>
<body>
<input placeholder="我是黄色的!" />
</body>
</html>
效果如下: