CSS中是否存在层次结构：不是属性

Question

我尝试了以下代码：

main *:not(.second) {
  color: red;
}

main:not(#first) {
  color: blue;
}

<main>
  <h2>Deals</h2>
  <p id="first">This is the first line</p>
  <p class="second">French Horn</p>
  <p class="second">This is another line</p>
  <p>Bottle of water</p>
</main>

我期望发生的事情是这样的：首先main *:not(.second)行将为除了第二类红色的元素之外的所有颜色着色。之后，main:not(#first)将为所有主要元素着色而不将id首先设为蓝色。这让我期望所有的线都变成蓝色，因为它们的父母main被赋予了蓝色。

现在没有发生这种情况，第一行变为红色，第二行也变为红色，接下来的两行变为蓝色，最后一行变为红色。这是如何工作的？