Селектор CSS для выбора элемента, который предшествует другому элементу? [дубликат]

этот вопрос уже есть ответ здесь:

  • Есть ли селектор CSS" предыдущий брат"? 14 ответов

Я работаю на странице входа для моего сайта, и я хочу, чтобы жирный ярлык, который приходит до поле ввода, когда текстовое поле получает фокус. Прямо сейчас у меня есть следующая разметка:

<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}
5 63
css css-selectors

5 ответов:

можно было бы использовать "смежный селектор братьев и сестер", если 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>

(это своего рода Хак, я бы лично использовал 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>
22

The CSS селекторы 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 псевдо-класса.

35

нет селектора, который даст вам предыдущий элемент с помощью CSS..

вам нужно будет использовать javascript для обработки того, что вам нужно.

6

использовать этот селектор:

label[for=username]
{
font-weight: bold
}

Это позволит выбрать метку, которая имеет значение 'username' в атрибуте 'for'

5

плавающий элемент ввода справа, достигает правильного порядка элементов без изменения порядка "имя пользователя" и": "в тексте метки, который вы получаете с направлением: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>
5