伪元素嵌套CSS不适用于在<details>下使用`&`作为::标记，但<summary>

Question

尝试使用伪元素进行CSS嵌套功能

::marker

但发现奇怪的是这种嵌套不起作用

 details {
      padding: 4px;
      & summary {
        color: red;
        & ::marker {
          color: green;
        }
      }
 }

虽然这有效

details {
      padding: 4px;
      & summary {
        color: red;   
      }
      &::marker {
          color: green;
        }
 }

下面是我要运行的代码片段

details.default{
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;

  & summary {
    color: red;
    font-size: large;
    cursor: pointer;
  }

  &::marker {
    color: green
  }

}


details.other {
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;

  & summary {
   color: red;
    font-size: large;
    cursor: pointer;
    
    &::marker {
      color: green;
    }
  }

}

<details class="default">
  <summary>default question</summary>
  <p>default answer</p>
</details>

<details class="other">
  <summary>other question</summary>
  <p>other answer</p>
</details>

所以

::marker

是

<summary>

或

<details>

的一部分吗？在检查元素时它显示在

下

Answer 1

在我的 Edge/Windows10 上，此代码片段使两个标记（箭头）都变成绿色。

注意空格很重要。当标记与摘要分开格式化时，我们需要一个，而当标记被格式化为嵌套中摘要的一部分时，我们没有一个。

details.default {
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;
  & summary {
    color: red;
    font-size: large;
    cursor: pointer;
  }
  & ::marker {
    color: green
  }
}

details.other {
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;
  & summary {
    color: red;
    font-size: large;
    cursor: pointer;
    &::marker {
      color: green;
    }
  }
}

<details class="default">
  <summary>default question</summary>
  <p>default answer</p>
</details>

<details class="other">
  <summary>other question</summary>
  <p>other answer</p>
</details>

【即将在FF、Chome、Safari上测试】