Question

我是否正确选择第一个子标签？

＆＃13;

.form-style-1 label:first-child{
  font-weight: bold;
}
.form-style-1 label{
  font-weight:normal;
}

＆＃13;

<form>
  <ul class="form-style-1">
    <li>
      <label>Восстановление пароля</label>
    </li>
    <li>
      <label>Введите e-mail</label>
      <input type="email" name="email" />
    </li>
  </ul>
  /* More code*/
</form>

＆＃13;

我想只做第一个标签更大胆，但似乎不起作用。

Answer 1

您的label是li的孩子，因此定位到第一个li而不是定位标签：

＆＃13;

.form-style-1 li:first-child label{
    font-weight: bold;
}
.form-style-1 label{
    font-weight:normal;
}

＆＃13;

<form>
  <ul class="form-style-1">
    <li>
      <label>Восстановление пароля</label>
    </li>
    <li>
      <label>Введите e-mail</label>
      <input type="email" name="email" />
    </li>
  </ul>
</form>

＆＃13;

Answer 2

lable是li的孩子，因此我们必须在first-child上使用nth-child(1)或li。写下你的css如下

.form-style-1 li:first-child label{
   font-weight: bold;
}

或

.form-style-1 li:nth-child(1) label{
   font-weight: bold;
}

然后对于第二个标签的普通文本，无需编写第二个css。

Answer 3

.form-style-1 li:nth-child(1) label{
    font-weight: bold;
}
.form-style-1 label{
    font-weight:normal;
}

<form>
        <ul class="form-style-1">
            <li>
                <label>Восстановление пароля</label>
            </li>
            <li>
                <label>Введите e-mail</label>
                <input type="email" name="email" />
            </li>
<form>

像这样使用

选择第一个子标签

3 个答案: