使用SCSS，如何给具有相同节点位置的元素中的特定元素赋予CSS样式？

Question

首先，请检查我的代码。

      <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 文件，并想知道如何在不使用 className 的情况下为特定的 h1 标签赋予样式。

我知道我们可以轻松解决仅提供类名的问题，但只是想弄清楚如何以不同的方式处理这个问题。谢谢！

Answer 1

我的建议是只添加一个 class 但如果你想在没有它的情况下这样做，那么你可以使用 nth-child select 或者像这样：

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

您可以使用 nth-child(1) 以相同的方式 select 第一个 h1。

使用SCSS，如何给具有相同节点位置的元素中的特定元素赋予CSS样式？

Using SCSS, How can I give CSS style to a specific element among the elements with the same node position?

html

css

reactjs

sass

styles