Блог

Главная - Вопросы по программированию - Как выбрать первую метку в div с помощью css?

Как выбрать первую метку в div с помощью css?

#html #css

#HTML #css

Вопрос:

Привет, я хочу выбрать первый элемент метки в div с помощью classname form_fields.

Ниже приведен код,

  <form>
     <div className="form_fields">
         <span>first span</span>
         <div>first div</div>
         <label>
             <span>Name</span>
         </label>
         <label>Description</label>
     </div></form>

Что я пробовал?

 .fields label:first-child {
    margin: 20px;
}

Но это не относится к первой метке внутри div класса form_fields. Как я могу это сделать? Спасибо.

Комментарии:

1. Вы не можете использовать className во встроенном html. Вместо этого используйте class. Также убедитесь, что класс такой же, как тот, который вы используете в css. :first-child выбирает первого дочернего элемента label. Смотрите ответы ниже для правильного способа.

2. Я бы сказал, что это неправильное использование label элемента для начала … вам лучше начать с исправления HTML (если это возможно).

Ответ №1:

Попробуйте с first-of-type псевдоселектором:

 .form_fields label:first-of-type {
    margin: 20px;
}

Ответ №2:

 .form_fields label:nth-of-type(1) {
    margin: 20px;
}

Ответ №3:

Я могу представить, что вы хотите сделать больше, чем просто это, но это отличное начало, чтобы спросить здесь. В HTML и CSS вы обнаружите, что существует несколько способов достижения одинаковых результатов, и выбранный вами путь часто будет основываться на личных предпочтениях. В данном конкретном случае у вас просто концептуальные ошибки, но вы определенно на правильном пути.

  1. в вашем теге вам следует изменить className на просто «класс».
  2. в вашем стиле измените:first-child на :first-of-type
 <form>
  <div class="form_fields">
    <span>first span</span>
    <div>first div</div>
    <label>
      <span>Name</span>
    </label>
    <label>Description</label>
  </div>
</form>

<style>
  .form_fields label:first-of-type {
    margin: 20px;
  }
</style>

Ответ №4:

Вы можете выбирать между 2 псевдоклассами :

  • :first-of-type Псевдокласс CSS представляет первый элемент своего типа среди группы родственных элементов. Смотрите документ
  • :nth-of-type(1) Псевдокласс CSS сопоставляет элементы заданного типа на основе их положения среди группы родственных элементов. Смотрите документ

Решение с :first-of-type :

введите описание изображения здесь

 .form_fields label:first-of-type {
  background:red;
}  
 <form>
  <div class="form_fields">
    <span>first span</span>
    <div>first div</div>
    <label>
      <span>Name</span>
    </label>
    <label>Description</label>
  </div>
</form>

Ответ №5:

 .form_fields label:nth-of-type(1) {
     color: blue;
 }