用于选择在另一个元素之前出现的元素的 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/492786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Selector for selecting an element that comes BEFORE another element?
提问by Dan Herbert
I'm working on a login page for my website and I want to bold the label that comes beforethe 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 afterthe 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.
我可以使用相邻选择器选择文本框后面的标签，但我不能选择它前面的元素。我可以使用这个 CSS 选择器规则，但它只选择后面的标签，所以当用户名文本框获得焦点时，密码标签变为粗体。
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.
有什么我可以做的吗？我知道 JavaScript 可以很容易地做到这一点，但如果可能的话，我想使用纯基于 CSS 的解决方案，我只是想不出一种方法来做到这一点。
采纳答案by Matt Brunell
It would be possible to use the 'adjacent sibling selector' if the inputwas before the label. Just put the inputbefore the label, and then modify the layout to put labelbefore the input. Here's an example:
这将有可能使用“相邻兄弟选择”如果input是以前的label。只需将 放在input之前label，然后将布局修改为放在label之前input。下面是一个例子：
<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)
（这是一种黑客行为，我个人会使用 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>回答by Dan Herbert
The CSS Selectors 4 Specprovides a syntax for defining the "subject" of a selector by using a !. As of early-2016, this is not available in any browser. I'm including this because it will be the correct way to do this using pure CSS once browsers implement this syntax.
的CSS选择器4规格提供了一种用于通过使用一限定所述的选择器的“受试者”语法!。截至 2016 年初，这在任何浏览器中均不可用。我之所以包含这个，是因为一旦浏览器实现了这种语法，这将是使用纯 CSS 执行此操作的正确方法。
Given the markup in the question
鉴于问题中的标记
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
This CSS would do the trick.
这个 CSS 可以解决问题。
label:has(+ input:focus) {font-weight: bold}
Of course, this assumes browsers actually implement the subject selector and that there are no bugs related to how this syntax works with the :focuspseudo-class.
当然，这假设浏览器实际实现了主题选择器，并且没有与此语法如何与:focus伪类一起使用的错误。
回答by JayTee
There's no selector that will give you the previous element using CSS..
没有选择器可以使用 CSS 为您提供前一个元素。
You will need to use javascript to handle what you're after.
您将需要使用 javascript 来处理您所追求的事情。
回答by JayTee
Use this selector:
使用这个选择器：
label[for=username]
{
font-weight: bold
}
this will select the label that has the value 'username' in the attribute 'for'
这将选择在属性 'for' 中具有值 'username' 的标签
回答by Ole Helgesen
Floating the input element to the right, achieves correct element order without changing order of "Username" and ":" in the label text that you get with direction:rtl.
将输入元素向右浮动，可以在不改变使用方向：rtl 获得的标签文本中“用户名”和“：”的顺序的情况下实现正确的元素顺序。
<style type="text/css">
form {text-align: right;}
input:focus + label {font-weight: bold}
input {float:right; clear:right;}
</style>
<form>
<div>
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div>
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
