Question

我有这段代码：

<fieldset id="login">
 <input type="text">
 <input type="password">
 <input type="checkbox" id="inline_invisible">
 <label for="invisible">Login invisible</label>
 <input type="checkbox" id="remember">
 <label for="remember">Remember me</label>
</fieldset>

标签不应该显示，直到其中一个输入框处于焦点上，所以我有这个CSS：

#login input:focus + input + label {
   display:inline-block;
}

但它只选择第一个标签而不是第二个标签，当密码框处于焦点时，第一个输入框不执行任何操作。我该怎么办？只有CSS，我不能改变HTML。

谢谢。

Answer 1

尝试

#login input:focus ~ label  {display:inline-block;}

加（+）选择相邻的兄弟姐妹，而〜寻找下一个兄弟

一般兄弟选择器的参考：https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

相邻兄弟选择器的参考： https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

使用general sibling选择器（~），它将选择关注输入后的所有label。

（注意+选择器只选择后面的一个兄弟元素）

＆＃13;

label{
  display: none;
}
#login input:focus ~ label {
  display: inline-block;
}

＆＃13;

<fieldset id="login">
  <input type="text">
  <input type="password">
  <input type="checkbox" id="inline_invisible">
  <label for="invisible">Login invisible</label>
  <input type="checkbox" id="remember">
  <label for="remember">Remember me</label>
</fieldset>

＆＃13;

CSS在此元素后面选择相同类型的所有元素

2 个答案: