Используя SCSS, как я могу придать стиль CSS определенному элементу среди элементов с одинаковым положением узла?

Во-первых, пожалуйста, проверьте мой код.

      <div className = {styles.settingInfo}>
        <header>
          <h1>User ID</h1>
          <p>this is for user ID</p>

          <h1>Username</h1>
          <p>this is for username</p>
        </header>
        <div>
          <button type='button'>change</button>
        </div>
      </div>

С помощью этого кода я пытаюсь сделать присваивая тегу (h1)username(/h1) значение margin-top:10px без указания className.

.settingInfo {
  @include flexFullWidth;
  height: 40%;

  header {
    @include headerStyle;

    h1 {
      color: colors.$BIG_TITLE;
      letter-spacing: 1px;
    }
  }

  div {
    width: 35%;
    padding-top: 20px;
    border: 1px solid red;
  }
}

Я установил файл SCSS таким образом и выяснил, как я могу придать определенному тегу h1 стиль без использования className.

Я знаю, что мы можем легко решить проблему, указав только имя класса, но просто хочу выяснить, как можно работать над этим по-другому. Благодарю вас!

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я предлагаю просто добавить класс, но если вы хотите сделать это без него, вы можете использовать селектор nth-child следующим образом:

header h1:nth-child(3) {
    margin-top: 10px;
}

Вы можете выбрать первый h1, используя nth-child(1) таким же образом.

Другие вопросы по теме