CSS 选择此元素之后的所有相同类型的元素答案

【问题标题】：CSS select all elements of the same type after this elementCSS 选择此元素之后的所有相同类型的元素
【发布时间】：2016-09-17 18:42:41
【问题描述】：

我有这个代码：

<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。

谢谢。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

试试

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

plus(+) 选择相邻的兄弟姐妹，而 ~ 寻找下一个兄弟姐妹

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

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

【讨论】：

【解决方案2】：

使用general sibling 选择器(~) 将选择焦点输入之后的所有labels。

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

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

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

【讨论】：

也感谢您的回答。