能否基于input的checked状态用CSS为关联label设置样式？

纯CSS没法直接实现你要的效果 #

目前CSS里没有原生选择器能通过label的for属性，直接关联到对应checkbox的checked状态。因为CSS选择器只能顺着DOM树从父到子、从前面的元素到后面的元素查找，没法反向找到和label绑定的checkbox再判断它的勾选状态。你设想的label[input:checked = "true"]这种写法，CSS规范里根本不存在。

两种可行的解决办法 #

办法1：调整DOM结构，用兄弟选择器搞定 #

如果能修改HTML结构，把label和对应的checkbox放在同一个容器里，或者让label紧跟在checkbox后面，就能用兄弟选择器实现纯CSS的样式控制：

<div>
    <input id="idOne" type="checkbox" checked>
    <label for="idOne">One</label>
</div>
<div>
    <input id="idTwo" type="checkbox">
    <label for="idTwo">Two</label>
</div>

对应的CSS代码：

input[type="checkbox"]:checked + label {
    color: pink;
}

这种方法完全用CSS实现，兼容性好且稳定。

办法2：用JavaScript动态加/删类名 #

如果没法调整DOM结构，就用JS监听checkbox的状态变化，给对应的label添加上样式类：

<div>
    <input id="idOne" type="checkbox" checked>
    <input id="idTwo" type="checkbox">
</div>
<div>
    <label for="idOne">One</label>
    <label for="idTwo">Two</label>
</div>

JS代码：

// 获取所有复选框
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 处理复选框状态变化的函数
function updateLabelStyle(e) {
    const checkbox = e.target;
    // 找到所有和这个复选框绑定的label
    const labels = document.querySelectorAll(`label[for="${checkbox.id}"]`);
    labels.forEach(label => {
        checkbox.checked ? label.classList.add('checked-label') : label.classList.remove('checked-label');
    });
}

// 给每个复选框绑定事件，页面加载时也初始化一次样式
checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateLabelStyle);
    updateLabelStyle({ target: checkbox });
});

对应的CSS样式：

.checked-label {
    color: pink;
}

这种方法不受DOM结构限制，能稳定实现你要的效果。

内容的提问来源于stack exchange，提问作者David T