伪 class 内容未正确显示

Question

您好，我使用 css 和 html5 创建了一个单选按钮手风琴，我遇到的问题是 section 元素的伪 class 它不会正确显示它的内容，例如 content: '1' 和 content: '3' 用于他们的部分面板。我创建了一个 codepen could someone see if they can get the numbers to be at the bottom of the panel and showing all corresponding numbers to show. I've been following this 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'; }

Answer 2

我认为 nth-of-type() 是您要查找的内容，而不是 nth-child()。

.accordion section:nth-of-type(1):after {
  content: '1';
}
.accordion section:nth-of-type(2):after {
  content: '2';
}
.accordion section:nth-of-type(3):after {
  content: '3';
}
.accordion section:nth-of-type(4):after {
  content: '4';
}

http://jsfiddle.net/0jc8s1q7/

Answer 3

看起来会是这样的

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

补偿您拥有的额外标签元素

Answer 4

正如@Liquidchrome 所指出的，您还有其他元素也是 .accordion 元素的子元素。

<div class="accordion">
    <input><!-- 1 -->
    <section><!-- 2 -->
    <input><!-- 3 -->
    <section><!-- 4 -->
    <input><!-- 5 -->
    <section><!-- 6 -->
    <input><!-- 7 -->
    <section><!-- 8 -->
</div>

:nth-child() 的替代方法是 :nth-of-type()。试试这个：

&:nth-of-type(1):after { content: '1'; }
&:nth-of-type(2):after { content: '2'; }
&:nth-of-type(3):after { content: '3'; }
&:nth-of-type(4):after { content: '4'; }

伪 class 内容未正确显示

pseudo class content not showing properly

html

css

accordion