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 {
}

但是如果label不在input之后？例如，如果将input和label放在html表格中。

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

Answer 1

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

如果你想根据标签的标签来设置标签的样式，你必须给它们一些属性，使你能够区分它们（例如一个类），或者使用JavaScript。

Answer 2

假设CSS就像一扇单向的门，一旦你打开它，你可以在那个房间里漫游，进入另一扇门，但是你将无法以相同的方式出来，如果元素是不是直接对父母的后代，或者嵌套的程度不同，你现在不能以任何方式选择它们。

因此假设，如果元素彼此不相邻，但它们都在共同父级下的相同嵌套级别，或者label是另一个嵌套元素的子级，嵌套在同一级别上你的checkbox做了

<div>
   <input type="checkbox" />
   <p>Hello</p>
   <label>Color me on check</label>
</div>

Demo

所以你可以像上面那样链接元素。

相同级别的相邻元素，您可以定位更多嵌套元素，如

input[type=checkbox]:checked + p + div > label {
    color: red;
}

Demo

但是当你在input type checkbox周围包裹一个元素时，选择器将会失败，就像我说的那样，一旦你进入，你就无法走出房间

~~Demo~~

所以就像

Parent
Checkbox    Level 1                    
Div         Level 1                    input[type=checkbox]:checked + div
Label       Level 1                    input[type=checkbox]:checked + div + label
   Span     Level 2 (Child of label)   input[type=checkbox]:checked + div + label > span
   i        Level 2 (Adjacent to span) input[type=checkbox]:checked + div + label > span + i

失败案例

Parent
Div             Level 1
   Checkbox     Level 2 (Child of div)
Span            Level (Adjacent to div) You won't be able to select this on check of checkbox

CSS规则：检查<label>与其INPUT </label>分开

2 个答案: