CSS选择此元素后相同类型的所有元素 [英] CSS select all elements of the same type after this element

问题描述

我有这个代码：

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

Labels are not supposed to show until one of the input boxes are on focus so I have this CSS:

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

但是它只选择第一个标签而不是第二个密码框在焦点上，对第一个输入框没有任何作用。我该怎么办？

but it only selects the first label and not the second one when the password box is on focus and does nothing with the first input box. What should I do? CSS only please, I cant change the html.

推荐答案

尝试

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

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

plus(+) selects the adjacent siblings while ~ looks for the next sibling

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

Reference for general sibling selector: https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

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

Reference for adjacent sibling selector: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

这篇关于CSS选择此元素后相同类型的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！