我找到了this pen on codepen，我想在自己的项目中包含（类似这样的内容）。首先，我尝试自己做一个类似的版本，但是没有用。所以我试图换笔。问题是：当我添加一个Parent.joins(:children).where.not(
id: Child.where(status: :closed).select('DISTINCT "parent_id"')
).distinct
时，没有任何作用。
这是我更改的代码：
div.pc-tab > input,
.pc-tab section > div {
display: none;
}
#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3 {
display: block;
}
我尝试将（例如）<h1>PureCSS Tabs</h1>
<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<nav>
<ul>
<li class="tab1">
<label for="tab1">First Tab</label>
</li>
<li class="tab2">
<label for="tab2">Second Tab</label>
</li>
<li class="tab3">
<label for="tab3">Third Tab</label>
</li>
</ul>
</nav>
<section>
<div class="bla">
<div class="tab1">
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
</div>
<div class="tab2">
<h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
</div>
<div class="tab3">
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
</div>
</div>
</section>
</div>更改为#tab1:checked ~ section .tab1或#tab1:checked ~ section .bla .tab1，但这并没有任何改变。