如何根据p标签内br与span的层级关系设置不同样式

需求：p标签内同时包含span和br标签，当br在span之前时，span应用红色样式；当br在span之后时，span应用绿色样式，且无法修改现有标签结构，预期第一个Lorem显示红色，第二个显示绿色。

正确实现代码 #

CSS 代码

/* br在span之后时，span应用绿色样式 */
p > span {
  margin-top: 2px;
  color: green;
}

/* br在span之前时，span应用红色样式（覆盖默认绿色） */
p > br + span {
  color: red;
}

/* 隐藏所有p标签下的br元素（按需保留） */
p > br {
  display: none;
}

HTML 结构

<div>
  <p>
    <br/>
    <span>Lorem</span>
  </p>
</div>

<div>
  <p>
    <span>Lorem</span>
    <br/>
  </p>
</div>

代码说明 #

• p > span：选中所有p标签直接子元素里的span，默认设置为绿色，对应br在span之后的场景。
• p > br + span：利用相邻兄弟选择器，选中紧接在br之后的span，将其颜色设为红色，对应br在span之前的场景。
• p > br { display: none; }：隐藏p标签内的br元素，避免换行影响布局，可根据实际需求调整。

内容的提问来源于stack exchange，提问作者Diego Lima