html - 伪类内容未正确显示

Question

您好，我使用 css 和 html5 创建了一个单选按钮 Accordion ，我遇到的问题是 section 元素的伪类无法正确显示其内容，例如 content: '1' 和 content: ' 3' 为他们的部分面板。我创建了一个 codepen有人可以看看他们是否可以让数字位于面板底部并显示所有相应的数字。我一直在关注这个 tutorial

codepen.io

&:nth-child(1):after { content: '1'; } // doesn't show
&:nth-child(2):after { content: '2'; } // can't get it to line up
&:nth-child(3):after { content: '3'; } // doesn't show
&:nth-child(4):after { content: '4'; } // can't get it to line up

Answer 1

你有 <label>被视为 <section> 子元素的元素元素并添加到计数中。

因此，为了补偿额外的标签元素，将您的子选择器更改为偶数。

&:nth-child(2):after { content: '1'; }
&:nth-child(4):after { content: '2'; }
&:nth-child(6):after { content: '3'; }
&:nth-child(8):after { content: '4'; }