如何为同一<p>标签内的第二段文本设置背景颜色

效果参考：

你当前贴出的业务核心代码（外层嵌套的snippet代码块容器可以忽略）如下：

<span class="trim-last-paragraph">
        <p><strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br><br><strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </span>

顺便提一句：你贴的代码里出现了p标签嵌套div的写法，这不符合HTML规范，浏览器解析时会自动提前闭合p标签再渲染内部div，实际写代码要避免块级元素嵌套在p里。

首先明确：CSS没有提供直接选中裸文本节点、或者指定标签之后所有兄弟文本/内联节点的选择器，所以完全不改DOM结构、纯靠CSS没法实现这个需求，下面给两个可落地的实现方案：

方案1：极小改动HTML结构（推荐，兼容性拉满） #

直接给第二段的所有内容套一个带类名的span标签，再写对应样式即可，改动量极小，所有浏览器都能完美支持：
修改后的HTML：

<span class="trim-last-paragraph">
  <p>
    <strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br><br>
    <span class="highlight-second">
      <strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </span>
  </p>
</span>

对应CSS：

.highlight-second {
  background-color: #ffeb3b; /* 替换成你需要的背景色 */
  padding: 2px 0; /* 避免背景贴住文字上下边缘，可按需调整 */
}

方案2：不改动原有HTML，用JS动态处理 #

如果HTML是后端动态输出、或者其他场景下没法直接修改源码，可以用几行JS自动找到第二段的位置，包裹标签后再加样式：

// 可根据你的实际业务场景调整选择器
const targetParagraph = document.querySelector('.trim-last-paragraph p');
if (targetParagraph) {
  const nodes = Array.from(targetParagraph.childNodes);
  let brCount = 0, splitPos = -1;
  // 定位到第二个br标签的位置
  nodes.forEach((node, idx) => {
    if (node.tagName === 'BR' && ++brCount === 2) splitPos = idx;
  });
  if (splitPos !== -1) {
    const wrap = document.createElement('span');
    wrap.className = 'highlight-second';
    // 把第二个br之后的所有内容都移入包裹标签
    nodes.slice(splitPos + 1).forEach(node => wrap.appendChild(node));
    // 把包裹标签插回原位置
    targetParagraph.insertBefore(wrap, nodes[splitPos].nextSibling);
  }
}

CSS部分和方案1完全相同即可。

内容的提问来源于stack exchange，提问作者Mel Mendonca