CSS选择器:伪元素是怎么回事儿?

6,520 阅读2分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力

伪元素官方是怎么解释的?

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

8.png

常见的伪元素有哪些呢?

  • ::after:创建一个伪元素,作为已选中元素的最后一个子元素
  • ::before:创建一个伪元素,其将成为匹配选中的元素的第一个子元素
  • ::cue:匹配所选元素中的WebVTT提示
  • ::first-letter:选中某块级元素第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)
  • ::first-line:在某块级元素的第一行应用样式
  • ::selection:应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)
  • ::slotted:用于选定那些被放在 HTML 模板中的元素

查看源图像

温馨提示:以下的伪元素是实验中的功能。这些功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于这些功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中这些功能的语法和行为可能随之改变。

::backdrop

::backdrop 作用于任何处于全屏模式的元素下的元素。

比如我们将视频全屏显示时的背景颜色改为白色(默认黑色)。

video::backdrop {
  background-color: #fff;
}

效果如下:

未命名.gif

::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>

效果如下:

截屏2021-08-27 上午10.28.04.png

::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>

效果如下:

截屏2021-08-27 上午10.36.01.png

你懂的的表情包你懂的照片大全_流行表情- 表情帝