:nth-child 新行中元素的选择器答案

【问题标题】：:nth-child selector for element in a new line:nth-child 新行中元素的选择器
【发布时间】：2021-03-21 23:00:36
【问题描述】：

我有以下表格：

.container .row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container .row:first-child > * {
  max-width: calc((100% - 24px) / 2);
  flex-basis: calc((100% - 24px) / 2);
  margin-bottom: 24px;
}

.container .row:first-child > div {
  display: flex;
  flex-direction: column;
}

.container .row:first-child label {
  line-height: 18px;
}

.container .row:first-child > a {
  padding-top: 18px;
}

textarea {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
   <textarea></textarea>
  </div>
</div>

<hr/>
<h3>Link in new line</h3>

<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="email2">Email 2:</label>
      <input type="email" id="email2" name="email2">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
   <textarea></textarea>
  </div>
</div>

我希望Add email 链接在新行中时删除它的填充，并且它上方的表单元素应该有一个 12px 的边距底部（可能会在链接中添加一个负边距顶部）。

我不知道在这种情况下我应该使用哪个 :nth-child(an + b of )。

我该如何解决这个问题？

【问题讨论】：

标签： css

【解决方案1】：

如果锚是奇数 nth-child，您应该能够移除顶部填充：

.container .row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container .row:first-child>* {
  max-width: calc((100% - 24px) / 2);
  flex-basis: calc((100% - 24px) / 2);
  margin-bottom: 24px;
}

.container .row:first-child label {
  line-height: 18px;
}

.container .row:first-child>a {
  padding-top: 18px;
}

.container .row:first-child>a:nth-child(odd) {
  padding-top: 0;
  margin-bottom:12px;
}

.container .row:first-child>div {
  display: flex;
  flex-direction: column;
}

textarea {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
    <textarea></textarea>
  </div>
</div>

<hr/>
<h3>Link in new line</h3>

<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="email2">Email 2:</label>
      <input type="email" id="email2" name="email2">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
    <textarea></textarea>
  </div>
</div>

【讨论】：