我怎样才能显示消息从指定的点击扰流只有CSS？

Question

我有一些剧透，我需要点击相应的按钮

.spoiler { 
    overflow: hidden; 
} 
#checker { 
    display: none; 
} 
.toggle { 
    display: block; 
    overflow: hidden; 
    width: 100px; 
    height: 20px; 
    background: #ecf0f1; 
    padding: 5px; 
    color: #aaa; 
    border-radius: 3px; 
    cursor: pointer; 
    white-space: nowrap; 
} 
#checker:not(:checked) ~ .spoiler { 
    height: 0; 
} 
#checker:checked ~ .toggle { 
    display: none; 
} 
code.text { 
    white-space: pre; 
    font-family: monospace; 
    font-size: 14px; 
    white-space: normal; 
} 

后显示扰流板的内容下面是当我按下第一个扰流板，始终显示第一内容的问题。

<input type="checkbox" id="checker"> 
<label for="checker" class="toggle">show spoiler 1</label> 
<div class="spoiler"> 
    <code class="text">Lorem ipsum dolor sit amet 1.</code> 
</div> 

<input type="checkbox" id="checker"> 
<label for="checker" class="toggle">show spoiler 2</label> 
<div class="spoiler"> 
    <code class="text">Lorem ipsum dolor sit amet 2.</code> 
</div> 

<input type="checkbox" id="checker"> 
<label for="checker" class="toggle">show spoiler 3</label> 
<div class="spoiler"> 
    <code class="text">Lorem ipsum dolor sit amet 3.</code> 
</div> 

我想为每个扰流板添加一个id，但我不知道CSS是否支持这个。

<input type="checkbox" id="checker1"> 
<label for="checker1" class="toggle">show spoiler 1</label> 
<div class="spoiler1"> 
    <code class="text">Lorem ipsum dolor sit amet 1.</code> 
</div> 

<input type="checkbox" id="checker2"> 
<label for="checker2" class="toggle">show spoiler 2</label> 
<div class="spoiler2"> 
    <code class="text">Lorem ipsum dolor sit amet 2.</code> 
</div> 

Answer 1

只有使用CSS，我认为有ID每一个可能是唯一的出路。

.spoiler { 
 
    overflow: hidden; 
 
} 
 
.checker { 
 
    display: none; 
 
} 
 
.toggle { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 100px; 
 
    height: 20px; 
 
    background: #ecf0f1; 
 
    padding: 5px; 
 
    color: #aaa; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 
.checker:not(:checked) + .toggle + .spoiler { 
 
    height: 0; 
 
} 
 
.checker:checked + .toggle { 
 
    display: none; 
 
} 
 
code.text { 
 
    white-space: pre; 
 
    font-family: monospace; 
 
    font-size: 14px; 
 
    white-space: normal; 
 
}

<input type="checkbox" id="checker1" class="checker"> 
 
<label for="checker1" class="toggle">show spoiler 1</label> 
 
<div class="spoiler"> 
 
    <code class="text">Lorem ipsum dolor sit amet 1.</code> 
 
</div> 
 

 
<input type="checkbox" id="checker2" class="checker"> 
 
<label for="checker2" class="toggle">show spoiler 2</label> 
 
<div class="spoiler"> 
 
    <code class="text">Lorem ipsum dolor sit amet 2.</code> 
 
</div>

主要修改（CSS）：

.checker:checked ~ .toggle到.checker:checked + .toggle

.checker:not(:checked) ~ .spoiler到.checker:not(:checked) + .toggle + .spoiler