HTML详细信息/摘要元素标记样式

Question

我有一些CSS,用于在细节元素中的摘要元素旁边标记标记.CSS本身工作正常.但是,如果我在第一个中嵌入另一个details元素(创建父详细信息元素和子详细信息元素),则我的标记内容不会正确切换.只要我打开父级,子级标记就会显示为打开,即使该元素尚未打开.

我不确定在这种情况下是否有适当的选择器将子详细信息元素与父项隔离,因为子项未打开且CSS中没有[闭合]语法我知道.看起来比嵌套细节元素时,一旦父母打开,所有孩子也都"打开".有没有人遇到过这样的事情？

summary {
    outline: none;
    font-size: 1.15em;
}

summary::-webkit-details-marker {
    display: none
}

summary:after {
    background: #da291c;
    border-color: #da291c;
    border-radius: 15px;
    content: "+";
    color: #fff;
    float: left;
    font-size: 1em;
    font-weight: bold;
    margin: -2px 10px 0 0;
    padding: 1px 0 3px 0;
    text-align: center;
    width: 30px;
}

details[open] summary:after {
    content: "-";
}

<details>
  <summary>Parent</summary>
  <p>
    Parent Holder Text
  </p>
  <details>
    <summary>Child</summary>
    <p>
      Child Holder Text
    </p>
  </details>
</details>

Answer 1

details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}

如果它不起作用尝试这个（::marker and content for chrome）

Answer 2

您的CSS适用content: "-";于其中的所有summary:after元素details[open],因此它也会级联到子级.尝试将它仅应用于使用子组合子(>)的父元素的直接子元素

details[open] > summary:after {
    content: "-";
}