将样式设置为checked+顺风中元素的子项

Question

我有一些复选框和一些span标记。检查输入时，如何将样式设置为跨度？html代码：

<div className="m-4">
<p id="id_work_days">
<label><input className='hidden checked:child:bg-gray-700 ' type="checkbox" name="work_days" value="1"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>sun</span></label>
<label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="2"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Mon</span></label>
<label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="3"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Tue</span></label>
<label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="4"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>wen</span></label>
<label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="5"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Fri</span></label>
<label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="6"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Thu</span></label>
<label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="7"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Fri</span></label>
</p>
</div>

我想做的css代码：

#id_work_days input[type="checkbox"]:checked + span {
background-color: gold;
color: black;
} 

Answer 1

您可以在input上使用peer，在span上使用peer-checked:bg-gray-700

请注意，我使用className作为您的，但在这个沙箱中，我使用的class用于常见的样式用法

<div className="m-4">
<p id="id_work_days">
<label><input className="peer hidden" type="checkbox" name="work_days" value="1" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">sun</span></label>
<label><input className="peer hidden" type="checkbox" name="work_days" value="2" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Mon</span></label>
<label><input className="peer hidden" type="checkbox" name="work_days" value="3" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Tue</span></label>
<label><input className="peer hidden" type="checkbox" name="work_days" value="4" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">wen</span></label>
<label><input className="peer hidden" type="checkbox" name="work_days" value="5" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Fri</span></label>
<label><input className="peer hidden" type="checkbox" name="work_days" value="6" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Thu</span></label>
<label><input className="peer hidden" type="checkbox" name="work_days" value="7" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Fri</span></label>
</p>
</div>