我有一些 CSS 可以对详细信息元素中的摘要元素旁边的标记进行样式设置。 CSS 本身工作得很好。但是，如果我在第一个详细信息元素中嵌套另一个详细信息元素（创建父详细信息元素和子详细信息元素），我的标记内容将无法正确切换。一旦我打开父元素，子标记就会显示为打开状态，即使该元素尚未打开。
在这种情况下，我不确定是否有适当的选择器将子详细信息元素与父元素隔离，因为子元素未打开，并且据我所知，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>
您的 CSS 正在应用content: "-"; to all summary:after内的元素details[open]，所以它也会级联到孩子们。尝试仅将其应用于父元素的直接子元素子组合器 https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors (>)
details[open] > summary:after {
content: "-";
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
