我有这个代码:
<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。
谢谢。
Try
#login input:focus ~ label {display:inline-block;}
plus(+) 选择相邻的兄弟姐妹,而 ~ 寻找下一个兄弟姐妹
通用兄弟选择器参考:https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors
相邻同级选择器参考:https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)