我有一些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>