Sass/CSS如何在特定兄弟元素不存在时选择目标元素

首先给所有 <p> 标签设置红色背景的基础样式：

p {
  margin-bottom: 15px;
  background-color: red;
}

接下来要实现「父容器内最后一个 <p>，且紧邻下一个元素不是 <ul> 时背景为蓝色」的需求，你之前的选择器错误地选中了 <p> 后面的元素，而非 <p> 本身。正确的写法需要借助 :has() 伪类来判断后续元素：

.text p:last-of-type:has(+ :not(ul)) {
  background-color: blue;
}

完整代码示例 #

CSS

p {
  margin-bottom: 15px;
  background-color: red;
}

.text p:last-of-type:has(+ :not(ul)) {
  background-color: blue;
}

HTML

<div class="text">
  <p>Testssssss</p>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
  <p>Test 2</p>
  <p>Test3</p>
  <ul>
    <li>item 1-1</li>
    <li>item 2-2</li>
  </ul>
  <p>Again</p>
  <ul>
    <li>asdf</li>
  </ul>

  <p>sadf</p>
  <span>sadf</span>
</div>

这段代码会让所有 <p> 默认显示红色背景，只有 .text 容器里最后一个 <p>（即内容为 sadf 的标签）因为后面跟着 <span> 而非 <ul>，背景会变为蓝色，完全符合你的需求。

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