参见英文答案 >
Is there a “previous sibling” CSS selector?12个答案我正在为我的网站工作一个登录页面，当文本框获得焦点时，我想将输入框前面的标签加粗。现在我有以下标记：
<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的解决方案，如果可能的话，我只是不能找出一种方法来做到这一点。
解决方法
如果输入在标签之前，则可以使用“邻近兄弟选择器”。只需将输入放在标签之前，然后修改布局，将标签放在输入之前。这里有一个例子：
<head runat="server">
<title></title>
<style type="text/css">
input:focus + label {font-weight: bold}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
</body>
(这是一个黑客，我个人使用javascript来做到这一点)
input:focus + label {font-weight: bold}
<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
