CSS选择器用于选择在另一个元素之前的元素?

前端之家收集整理的这篇文章主要介绍了CSS选择器用于选择在另一个元素之前的元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > 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>
原文链接:https://www.f2er.com/css/223252.html

猜你在找的CSS相关文章