CSS选择器用于选择在另一个元素之前的元素？ [英] CSS Selector for selecting an element that comes BEFORE another element?
问题描述
我正在处理我的网站的登录页面，当文本框获得焦点时，我想将之前输入框的标签加粗。现在我有以下标记：
< label for =username>用户名：< / label&
< input type =textboxid =username/>
< label for =password>密码：< / label>
< input type =textboxid =password/>
我可以使用相邻的选择器在文本框后选择 ，但我不能选择它之前的元素。我可以使用这个CSS选择器规则，但它只选择标签之后，所以当用户名文本框获得焦点，密码标签变为粗体。
input：focus + label {font-weight：bold}
可以做这个工作吗？我知道JavaScript可以用来轻松地做到这一点，但我想使用一个纯粹的基于CSS的解决方案，如果可能的话，我只是不能找出一种方法来做。
输入放在标签之前，然后修改布局以放置 code>之前的输入。这里有一个例子： < head runat =server>
< title>< / title>
< style type =text / css>
input：focus + label {font-weight：bold}
< / style>
< / head>
< body>
< form id =form1runat =server>
< div style =direction：rtl>
< input type =textid =username/>
< label for =username>用户名：< / label>
< / div>
< div style =direction：rtl>
< input type =passwordid =password/>
< label for =password>密码：< / label>
< / div>
< / form>
< / body>
（这是一种黑客，我个人会使用javascript来执行此操作）
input：focus + label {font-weight：bold}
< form id =form1runat =server> < div style =direction：rtl> < input type =textid =username/> < label for =username>用户名：< / label> < / div> < div style =direction：rtl> < input type =passwordid =password/> < label for =password>密码：< / label> < / div>< / form>
I'm working on a login page for my website and I want to bold the label that comes before the input box when the text box gains focus. Right now I have the following markup:
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
I can use the adjacent selector to select the label after the text box, but I can't select the element before it. I can use this CSS selector rule, but it only selects the label after, so when the username text box gains focus, the password label becomes bold.
input:focus + label {font-weight: bold}
Is there anything I can do to make this work? I know JavaScript could be used to easily do this, but I'd like to use a purely CSS-based solution if possible, I just can't figure out a way to do it.
解决方案 It would be possible to use the 'adjacent sibling selector' if the input was before the label. Just put the input before the label, and then modify the layout to put label before the input. Here's an example:
<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>
(It's kind of a hack, I would personally use javascript to do this)
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>
这篇关于CSS选择器用于选择在另一个元素之前的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
