标签 css css-selectors
<分区>
我正在为我的网站创建一个登录页面，我想在文本框获得焦点时将输入框之前的标签加粗。现在我有以下标记:
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
我可以使用相邻的选择器来选择文本框之后的标签，但是我不能选择它之前的元素。我可以使用这个 CSS 选择器规则，但它只选择后面的标签，所以当用户名文本框获得焦点时，密码标签变为粗体。
input:focus + label {font-weight: bold}
我可以做些什么来完成这项工作吗？我知道可以使用 JavaScript 轻松地做到这一点，但如果可能的话，我想使用纯基于 CSS 的解决方案，但我只是想不出一种方法来做到这一点。
最佳答案
CSS Selectors 4 Spec提供使用 ! 定义选择器“主题”的语法。截至 2016 年初，这在任何浏览器中都不可用。我将其包含在内是因为一旦浏览器实现了此语法，这将是使用纯 CSS 执行此操作的正确方法。
给定问题中的标记
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
这个 CSS 可以解决问题。
label:has(+ input:focus) {font-weight: bold}
当然，这假设浏览器实际实现了主题选择器，并且没有与此语法如何与 :focus 伪类一起工作相关的错误。
关于用于选择出现在另一个元素之前的元素的 CSS 选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/492786/
相关文章：
css - last-of-type 不适用于 IE11 和 Edge 中的自定义元素
CSS - 一个 child 的宽度占另一个 child 的百分比(如表格)
html - 如何使用 CSS 选择器划分 div 元素的内容？
javascript - 如何使用 JavaScript 和 Nth-Last-Child 添加和删除 CSS 类？
css - 选择 :first-of-type by class only
jQuery if 语句 : section id matches href# within <a>