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