Во-первых, пожалуйста, проверьте мой код.
<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.
Я знаю, что мы можем легко решить проблему, указав только имя класса, но просто хочу выяснить, как можно работать над этим по-другому. Благодарю вас!
Я предлагаю просто добавить класс, но если вы хотите сделать это без него, вы можете использовать селектор nth-child
следующим образом:
header h1:nth-child(3) {
margin-top: 10px;
}
Вы можете выбрать первый h1
, используя nth-child(1)
таким же образом.