如何将不同的 css 应用于 css 中的不同子元素？

阿努拉格·米什拉

下面是我的html代码 -

.parent>.textClass:first-child {
  margin-top: -1rem;
}

.parent>.textClass:not(:first-child) {
  margin-top: -3rem;
}

<div class="parent">
  <div>
    <section class="sectionWrapper">
      <div class="textClass">
        <span>My text</span>
      </div>
    </section>
  </div>
  <div>
    <section class="sectionWrapper">
      <div class="textClass">
        <span>My text</span>
      </div>
    </section>
  </div>
  <div>
    <section class="sectionWrapper">
      <div class="textClass">
        <span>My text</span>
      </div>
    </section>
  </div>
</div>

我想先textClass应该是marginTop:-1px;，然后休息textClass应该是marginTop:-3px;。我试图做下面的代码，但它不工作 -

如何将 css 应用于不同的子元素？

卡梅隆

.textClass不是小时候来的.parent。这是一个孙子。

用这个：

注意：我将您的边距更改为正边距，以便您可以看到更改。设置负边距后，它会超出视口。

.parent>div:first-child > section > .textClass {
  margin-top: 1rem;
}

.parent> div:not(:first-child) > section > .textClass {
  margin-top: 3rem;
}

<div class="parent">
  <div>
    <section class="sectionWrapper">
      <div class="textClass">
        <span>My text</span>
      </div>
    </section>
  </div>
  <div>
    <section class="sectionWrapper">
      <div class="textClass">
        <span>My text</span>
      </div>
    </section>
  </div>
  <div>
    <section class="sectionWrapper">
      <div class="textClass">
        <span>My text</span>
      </div>
    </section>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。