如何仅在悬停元素的::first-line伪元素时应用样式？

你原代码里的 p::first-line:hover 无法生效，因为CSS不支持伪元素（::first-line）后直接跟伪类（:hover）的选择器组合。下面给两种可行的解决方法：

方法一：JavaScript动态检测（适配所有场景） #

通过监听鼠标位置，判断是否落在段落第一行，再动态添加样式类：

// 获取所有段落元素
const paragraphs = document.querySelectorAll('p');

paragraphs.forEach(p => {
  // 鼠标移入段落时判断位置
  p.addEventListener('mouseover', (e) => {
    // 获取段落所有行的位置信息
    const lineRects = p.getClientRects();
    if (lineRects.length === 0) return;
    const firstLine = lineRects[0];
    // 判断鼠标是否在第一行范围内
    if (e.clientY >= firstLine.top && e.clientY <= firstLine.bottom &&
        e.clientX >= firstLine.left && e.clientX <= firstLine.right) {
      p.classList.add('first-line-bold');
    }
  });

  // 鼠标移出时移除样式类
  p.addEventListener('mouseout', () => {
    p.classList.remove('first-line-bold');
  });

  // 窗口大小变化时重置样式，避免行位置变化后样式残留
  window.addEventListener('resize', () => {
    p.classList.remove('first-line-bold');
  });
});

对应的CSS：

p.first-line-bold::first-line {
  font-weight: bold;
}

这个方法能准确适配窗口大小变化、字体行高改变等场景，兼容性也不错。

方法二：纯CSS技巧（适合固定布局场景） #

利用绝对定位的伪元素覆盖第一行，通过控制指针事件实现仅hover第一行时触发样式：

p {
  position: relative;
  line-height: 1.5; /* 固定行高，需和伪元素高度一致 */
  pointer-events: none; /* 让段落本身不接收鼠标事件 */
}

/* 用伪元素覆盖第一行，接收鼠标事件 */
p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5em; /* 和段落行高匹配 */
  pointer-events: auto; /* 允许伪元素接收hover事件 */
  z-index: 0;
}

/* 当伪元素被hover时，让第一行变粗 */
p:hover::first-line {
  font-weight: bold;
}

这个方法不用写JS，但局限性明显：只适合行高固定、容器宽度不变的场景，窗口大小变化后，伪元素的高度可能无法匹配实际第一行的高度，导致hover范围不准确。

内容的提问来源于stack exchange，提问作者Keshav Saraf