将样式设置为“检查”+“顺风”中元素的子元素

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上使用input，在span上使用peer-checked:bg-gray-700

请注意，我使用的是className作为您的，但在https://play.tailwindcss.com/WxQh57xP0P中，我使用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>