CSS 焦点。无法更改标签字段

Question

我试图将焦点放在一个字段上，更改文本的颜色，但无论我尝试什么:它都不起作用。以下是 HTML:

.register-section input:focus + .register-section label[for=signup_username] {
    color: #ffffff !important;
}

<div class="register-section" id="basic-details-section">
<h4>Account Details</h4>
<label for="signup_username">Username (required)</label>
<input type="text" name="signup_username" id="signup_username" value="" />
</div>

谁能告诉我我做错了什么？提前致谢!

Answer 1

+ 邻接运算符只能用于选择初始选择器之后的 DOM 节点(CSS 选择器只能在这个方向解析)。因此，由于您的标签在您在 html 中的输入之前，您无法使用 CSS 在输入的 :focus 状态下选择它。

要解决此问题，您需要更改 HTML 以反转元素的顺序，并调整 CSS 以更改它们的显示顺序，然后进行适当的选择:

.register-section label[for=signup_username] {
  float: left;
}
.register-section input:focus + label[for=signup_username] {
  color: #ffffff !important;
}

<div class="register-section" id="basic-details-section">
  <h4>Account Details</h4>
  <input type="text" name="signup_username" id="signup_username" value="" />
  <label for="signup_username">Username (required)</label>
</div>