细数最新的CSS伪元素及其用法

引言

CSS 中有两个很常见的概念，伪类和伪元素。

伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。

伪元素会建立一个抽象的伪元素，这个元素不是 DOM 中的真实元素，可是会存在于最终的渲染树中，咱们能够为其添加样式。

最常规的区分伪类和伪元素的方法是：实现伪类的效果能够经过添加类来实现，可是想要实现伪元素的等价效果只能建立实际的 DOM 节点。

此外，伪类是使用单冒号:，伪元素使用是双冒号::。

伪元素能够分为排版伪元素、突出显示伪元素、树中伪元素三类。下面咱们一块儿看看具体都有哪些吧。

本文主要介绍CSS Pseudo-Elements Module Level 4涉及的伪元素，由于该标准仍处于草案阶段，因此会存在变更的可能。本文旨在带你们了解有哪些如今以及未来可用的伪类。有兴趣的能够持续跟进。

第一类：排版伪元素

1. ::first-line伪元素

这个伪元素你们应该很熟悉，由于早在 CSS2.1 中就存在了。它表示所属源元素的第一格式化行。能够定义这一行的样式。

以下面的 CSS 和 HTML 代码，其对应的效果如图所示。

p::first-line {
    text-transform: uppercase;
  }
复制代码

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt. Odio, eligendi placeat.</p>
复制代码

首行伪元素的基础效果

第一格式化行被截断的位置与元素的宽度、字体大小等不少因素有关，本文的截图均只为了展现效果而截取的。

虽然在 DOM 中看不到，但实际上，上面的这段 HTML 代码会经过添加虚拟标签的方式进行修改。以下：

<p><p::first-line>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p::first-line> Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt. Odio, eligendi placeat.</p>
复制代码

若是::first-line伪元素的应用会截断真实的元素，这个时候会在截断的位置前先闭合标签，在截断位置以后再从新添加开标签。对好比下两段代码：

<!-- 无伪元素 -->
  <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt.</span> Odio, eligendi placeat.</p>
复制代码<!-- 有伪元素 --> <p><p::first-line><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></p::first-line><span> Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt.</span> Odio, eligendi placeat.</p> 复制代码

1.1 如何肯定第一格式化行

须要注意的是，::first-line伪元素只有应用在块级容器上才有效，且必须出如今相同流中的块级子孙元素中（即没有定位和浮动）。

以下所示，DIV 的首行就是 P 元素的首行

<div>
    <p>Lorem ipsum</p> dolor sit amet consectetur adipisicing elit. Omnis asperiores voluptatem sit ipsa ex fugit provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste!
  </div>
复制代码<!-- 等价抽象代码 --> <div> <p><div::first-line>Lorem ipsum</div::first-line></p> dolor sit amet consectetur adipisicing elit. Omnis asperiores voluptatem sit ipsa ex fugit provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste! </div> 复制代码

内嵌块级元素的首行效果

若是 display 值为table-cell和inline-block的元素的内容，不能做为祖先元素的第一格式化行内容。

以下所示，若是将上面 HTML 代码中 p 标签改成display: inline-block，则其不会应用首行效果。

以下所示，能够看出 Lorem ipsum 仍为小写：

<div>
    <p style="display: inline-block;">Lorem ipsum</p> dolor sit amet consectetur adipisicing elit. Omnis asperiores voluptatem sit ipsa ex fugit
    provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste!
  </div>
复制代码<!-- 等价抽象代码 --> <div> <p style="display: inline-block;">Lorem ipsum</p><div::first-line> dolor sit amet consectetur adipisicing elit. Omnis</div::first-line> asperiores voluptatem sit ipsa ex fugit provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste! </div> 复制代码

内嵌非块级元素的首行效果

1.2 能够用于::first-line伪元素的样式

::first-line生成的伪元素的行为相似于一个行级元素，还有一些其余限制。主要有如下样式能够应用于其上：

• 全部的字体属性
• color和 opacity属性
• 全部的背景属性
• 能够应用于行级元素的排版属性
• 文字装饰属性
• 能够用于行级元素的行布局属性
• 其余一些规范中特别指定能够应用的属性

此外，浏览器厂商有可能额外应用其余属性。

2. ::first-letter伪元素

::first-letter伪元素表明所属源元素的第一格式化行的第一个排版字符单元，且其前面不能有任何其余内容。

::first-letter经常使用于下沉首字母效果。

以下，咱们能够建立一个下沉两行的段落。第一种方法，是CSS-INLINE-3中引入的，浏览器尚不支持。咱们能够经过第二种方法实现一样的效果。

<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos hic vero reprehenderit sunt temporibus?
    Doloribus consequatur quo illo porro quae recusandae autem eos. Corrupti itaque alias nam eius animi illum.</p>
复制代码

<!-- initial-letter(尚不支持) -->
  p::first-letter { initial-letter: 2; }
复制代码<!-- 普通实现 --> h3 + p::first-letter { float: left; display: inline-block; font-size: 32px; padding: 10px 15px; } 复制代码

首字母下沉效果

注意，第一个排版字符单元前的标点符号（能够是多个标点符号）也要包含在::first-letter伪元素内。CSS3 TEXT中规定，一个排版字符单元能够包含超过一个的 Unicode 码点。不一样的语言也能够有额外的规则决定如何处理。

若是将要放入::first-letter伪元素的字符不在同一个元素中，如<p>“<em>L中的"L，浏览器能够选择一个元素建立伪元素，也能够两个都建立，或者都不建立。

在 chrome 下效果以下，仍是挺奇怪的。因此尽可能避免该状况。

伪元素中的字符不在同一个元素内

此外，若是块元素的首字母不在行首（如因为双向从新排序），则浏览器不须要建立伪元素。

2.1 如何肯定首字母

首字母必须出如今第一格式化行内。

以下所示，将b标签改成display: inline-block;，则其不会出如今第一格式化行内，因此首字母无效果。

<p>“<b style="display: inline-block;">Lorem</b>” ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos hic vero reprehenderit sunt temporibus?
    Doloribus consequatur quo illo porro quae recusandae autem eos. Corrupti itaque alias nam eius animi illum.</p>
复制代码

首字母不在首行内无效果

目前，::first-letter只可用于块级元素，将来可能会容许应用到更多的display类型中。

伪元素的虚拟标签应当紧跟在首字母以前，哪怕这个首字母是在子孙元素，这一点和::first-line相似。

以下例，首字母首字母在子孙元素中，首字母的并无加粗，由于伪元素是添加到 span 标签内部的，因此字重是正常的。

p { line-height: 1.1 }
  p::first-letter { font-size: 2em; font-weight: normal }
  span { font-weight: bold }
复制代码

<p><span>Lorem ipsum</span> dolor sit amet consectetur adipisicing elit. Magni possimus rerum eaque architecto, adipisci neque odio, recusandae sapiente placeat ullam velit ratione esse aut expedita quae earum. Velit, dignissimos accusamus?</p>
复制代码

首字母在子孙元素的样式覆盖

若是元素有::before或者::after，则::first-letter伪元素也能够应用到其content值中。

若是元素是列表项（即display: list-item），则首字母会应用在标记符号后面。以下图：

列表项的首字母

若是列表项的显示位置在内部（即list-style-position: inside），浏览器能够选择忽略::first-letter伪元素。

2.2 能够用于::first-letter伪元素的样式

::first-line生成的伪元素的行为相似于一个行级元素，还有一些其余限制。主要有如下样式能够应用于其上：

• 全部的字体属性
• color和 opacity属性
• 全部的背景属性
• 能够应用于行级元素的排版属性
• 文字装饰属性
• 能够用于行级元素的行布局属性
• margin和 padding属性
• border和 box-shadow
• 其余一些规范中特别指定能够应用的属性

一样，浏览器厂商有可能额外应用其余属性。

第二类：突出显示伪元素

突出显示伪元素表示文档中特定状态的部分，一般采用不一样的样式展现该状态。如页面内容的选中。

突出显示伪元素不须要在元素树中有体现，而且能够任意跨越元素边界而不考虑其嵌套结构。

突出显示伪元素主要有如下几类：

1. ::selection与 ::inactive-selection

这两个伪元素表示用户在文档中选取的内容。::selection表示有效的选择，相反，::inactive-selection表示无效的选择（如当窗口无效，没法相应选中事件时）

以下图所示，咱们能够定义页面中选中内容的样式，输入框中的内容也能够。

选中高亮样式

请原谅我也没法触发::inactive-selection。你们知道它是干啥的就好了。

2. ::spelling-error

::spelling-error表示浏览器识别为拼写错误的文本部分。暂无实现。

3. ::grammar-error

::grammar-error表示浏览器识别为语法错误的文本部分。暂无实现。

::spelling-error和::grammar-error暂时均无实现。一方面，不一样的语言的语法与拼写较为复杂。另外一方面，::spelling-error和::grammar-error还可能会致使用户隐私的泄露，如用户名和地址等。因此浏览器实现必须避免读取这类突出显示内容的样式。

能够应用到突出显示类伪元素的样式

对于突出显示类伪元素，咱们只能够应用不影响布局的属性。以下：

• color
• background-color
• cursor
• caret-color
• caret-color
• text-decoration及其相关属性
• text-shadow
• stroke-color/ fill-color/ stroke-width

草案中对这里能够应用的属性还有待确认，因此会存在必定的增减。现阶段，也只有 color 和 background 获得了支持。

第三类：存在于元素树中的伪元素：树中伪元素

这类伪元素会一直存在于元素树中，它们聚集成源元素的任何属性。

1. 内容生成伪元素：::before/::after

当::before/::after伪元素的content属性不为'none'时，这两类伪元素就会生成一个元素，做为源元素的子元素，能够和 DOM 树中的元素同样定义样式。

::before是在源元素的实际内容前添加伪元素。::after是在源元素的实际内容后添加伪元素。

正如上文提到的，与常规的元素同样，::before和::after两个伪元素能够包含::first-line和::first-letter。

2. 列表项标记伪元素：::marker

::markder能够用于定义列表项标记的样式。

以下，咱们能够分开定义列表项及其内容的颜色。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
复制代码

li{
      color: red;
    }
    li::marker {
      color:green;
    }
复制代码

自定义列表项标记颜色

该伪元素暂时只有 safari 支持，尝试的话请使用 safari。能够用于该伪元素的属性也有限，包括全部字体样式、color以及text-combine-upright，有待之后扩充。

3. 输入框占位伪元素：::placeholder

::placeholder表示输入框内占位提示文字。能够定义其样式。

如：

::placeholder {
    color: blue;
  }
复制代码

输入框占位伪元素样式

**全部能够应用到::first-line伪元素的样式均可以用于::placeholder上。**能够参考上面的内容。

注意还有一个:placeholder-shown伪类，它主要用于定义显示了占位文字的元元素自己的样式，而不是占位文字的样式。

总结

本文列举了CSS Pseudo-Elements Module Level 4中的全部伪元素类型。

首先，详细介绍了排版类伪元素，这一类你们的使用场景较多，支持度也较好。

其次，介绍了突出显示类伪元素，主要能够用于选中样式的修改，其余的还没有获得支持。

最后，介绍了树中伪元素，包括::before/::after/::marker/::placeholder

虽然有些伪元素没有获得支持，或者能够应用的属性优先，可是 CSS 工做中正在进行必定的扩展。有兴趣的同窗们能够持续关注。

CSS Pseudo-Elements Module Level 4：https://www.w3.org/TR/2019/WD-css-pseudo-4-20190225/#window-interface。

---

若是你喜欢，欢迎扫码关注个人公众号，我会按期云陪读，并分享一些其余的前端知识哟。