伪类内容无法正常显示

Question

嗨我用css和html5创建了一个单选按钮手风琴，我遇到的问题是截面元素的伪类，它不能正确显示内容，例如内容：'1'和内容：' 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'; }

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指出你有其他元素也是int doEveryTwoTimes= 1; // Counter to do something every two loops int doEveryFourTimes= 2; // Counter to do something every four loops // add a nested infinite loop to increment counter while(true){ if(doEveryTwoTimes%2 == 0){ // DO STUFF EVERY **TWO** LOOPS } if(?????){ // DO STUFF EVERY **FOUR** LOOPS } doEveryTwoTimes++; doEveryFourTimes++; } 元素的子元素。

.accordion

<div class="accordion"> <input><!-- 1 --> <section><!-- 2 --> <input><!-- 3 --> <section><!-- 4 --> <input><!-- 5 --> <section><!-- 6 --> <input><!-- 7 --> <section><!-- 8 --> </div> 的替代方案是:nth-of-type()。试试这个：

:nth-child()