面试题：CSS专家难度面试题：伪元素选择器的优化与应用

工作原理

:before 和 :after 伪元素选择器用于在选定元素的内容之前或之后插入生成内容。这些生成内容并非文档的实际组成部分，而是通过 CSS 渲染在页面上。例如，对于 :before，它会在目标元素内部的第一个子元素之前插入内容； :after 则在目标元素内部的最后一个子元素之后插入内容。插入的内容通过 content 属性定义，可以是文本、图像（通过 url() 引入）或其他一些特定的值。

继承机制

伪元素本身不继承常规的继承属性，因为它们并非文档树中的实际元素。然而，它们会从其所在的宿主元素继承一些与文本相关的属性，比如 font、color 等。这意味着设置在宿主元素上的文本样式通常会应用到伪元素所插入的内容上。

性能优化要点

避免过度使用：过多的伪元素会增加渲染计算量，特别是在复杂页面中。尽量减少不必要的伪元素使用，确保每个伪元素都对设计有明确贡献。
减少重排重绘：避免频繁修改伪元素的样式，尤其是那些会触发重排（如改变 width、height）或重绘（如改变 color）的属性。如果必须修改，尽量批量进行样式更改，或者使用 transform 和 opacity 等不会触发重排的属性来实现动画效果。
缓存样式：对于频繁使用的伪元素样式，可以将其定义为类，通过切换类名来改变样式，而不是直接操作内联样式，这样浏览器可以更好地优化渲染。

复杂布局场景示例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .parent {
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

    .child:before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
    }

    .child:after {
      content: "";
      position: absolute;
      bottom: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      background-color: green;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

实现思路

整体布局：外层 .parent 元素使用 flex 布局，使其内部元素水平垂直居中。.parent 设置了固定的宽度和高度，并添加了边框，作为容器展示。
子元素布局：.child 元素是需要添加装饰效果的主要元素，设置了固定的宽度和高度，并赋予浅蓝色背景。
伪元素应用：
- :before 伪元素在 .child 元素的左上角添加了一个红色的圆形，通过 position: absolute 使其相对于 .child 定位，top 和 left 负值将其放置在 .child 元素边界之外。
- :after 伪元素在 .child 元素的右下角添加了一个绿色的圆形，同样使用 position: absolute，bottom 和 right 负值将其定位在 .child 元素边界之外。通过这种方式，利用伪元素实现了复杂布局场景下的装饰性效果，而无需在 HTML 结构中添加额外的实际元素，简化了代码结构。

星途面试题库