如何根据 p 中的 br 和 span 标签层次结构设置样式

Question

我在 p 内的相同位置有一个跨度 a br。我希望如果 br 位于 span 之前，则 span 具有不同的样式，但如果 span 位于 br 之后，则 span 具有另一种样式。

p:first-child span {
  margin-top: 2px;
  color: green
}


p:first-child span + br {
  margin-top: 10px;
  color: red
}

p > br {
  display: none;
}

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

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

jsfiddle

第一个 Lorem 为红色，第二个 Lorem 为绿色

它是一个包含不同数据的数组，有些数据有这样的标签。所以这不是我可以抄袭的东西

Answer 1

如果

br

和

span

是唯一的元素，则考虑

:last-child

和

:first-child

p span:first-child {
  margin-top: 2px;
  color: green
}

p span:last-child {
  margin-top: 10px;
  color: red
}

p > br {
  display: none;
}

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

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