2

对于普通的单选按钮

<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？例如，如果将inputs 和labels 放在 html 表中。

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

4

2 回答 2

4

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

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

于 2013-09-25T09:29:14.020 回答
1

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

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

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

演示

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

同一级别的相邻元素，您可以定位更进一步的嵌套元素，例如

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

演示

但是，正如我所说，在选择器周围包裹元素的那一刻input type checkbox将失败，一旦进入房间，您就无法离开房间

演示

所以就像

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
于 2013-09-25T09:30:21.423 回答