:checked separated from its INPUT 的 CSS 规则

Question

对于普通单选按钮为

<input type="radio" id="radio2" name="radios"value="yes">
<label for="radio2">Yes</label>

<input type="radio" id="radio3" name="radios" value="no">
<label for="radio3">Yes</label>

可以使用此选择器设置checked标签的CSS

input:checked + label {
}

但是如果标签不是紧接在输入之后呢？例如，如果将 input 和 label 放置在 html 表格中。

for 和 id 属性连接 label 和 input，因为将通过单击标签来选择输入。我想知道是否可以使用此连接来设置已检查输入的标签的 CSS 规则。

Answer 1

不，没有。您不能在 CSS 选择器中“动态”使用 HTML 属性的值(尽管您可以静态使用它们，如 label[for=radio2] 中所示)。

如果您想根据标签的内容来设计标签的样式，您要么必须为它们提供一些属性来区分它们(例如类)，要么使用 JavaScript。