在选择器组合中使用逗号

如何解决在选择器组合中使用逗号

好的，所以我在这里遇到了一点麻烦，我正在创建一个 div，它将成为另一个 div 的孩子，并将成为 •ul,•显然li & p 元素 我的问题是我需要从第一个 every first child 开始设置 div 的样式，我知道 :first-child 伪类会成功，因为我已经使用它太多了，给定这个标记片段

div>ul,p:first-child {
  border: 4px solid red;
}

<div>
  <div>
    <ul>
      <ul>
        <li>
          <p>Item 1</p>
          <p>Item 2</p>
        </li>
        <li></li>
        <li></li>
        <p>Yesterday</p>
        <p>Today</p>
        <li></li>
        <li>
        </li>
        <li>
        </li>
        <li>
          <p>Item 3</p>
        </li>
        <li>
          <p>Item 4</p>
        </li>
      </ul>
    </ul>
  </div>
</div>

我真的不明白为什么 Chrome DevTools 应用了这些样式，但让我在控制台中将 p:first child 选择器显示为灰色，如下图所示