nth-child（）只有一个属性正在工作 - 为什么？

Question

有谁知道为什么只有background-color: #f2eaea;内的.responstable tr:nth-child(4n+2)有效？

border: 19px solid #e6d9d9;不是，我不明白为什么。

我从互联网上获取了一些代码。我试图在其他类中使用它，它正在工作。

.responstable {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    color: #570101;
    border-radius: 10px;
    border: 1px solid #911515;

    }
.responstable tr {
  border: 1px solid #e6d9d9;

}
.responstable tr:nth-child(4n+2) {
  background-color: #f2eaea;
  border: 19px solid #e6d9d9;

}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #911515;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #e6d9d9;
}

@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #e6d9d9;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}

<table class="responstable">

    </br>
    </br>

  <tr>
    <th data-th="Driver details"><span>First name</span></th>
    <th>Surname</th>
    <th>Date of birth</th>
    <!-- <th>Relationship</th> -->
  </tr>

  <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

</table>

Answer 1

试试这个

.responstable {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    color: #570101;
    border-radius: 10px;
    border: 1px solid #911515;
    border-collapse: collapse;
    }
.responstable tr {
  border: 1px solid #e6d9d9;

}
.responstable tr:nth-child(4n+2) {
  background-color: #f2eaea;
  border: 19px solid #e6d9d9;

}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #911515;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #e6d9d9;
}

@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #e6d9d9;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}

<table class="responstable">

    </br>
    </br>

  <tr>
    <th data-th="Driver details"><span>First name</span></th>
    <th>Surname</th>
    <th>Date of birth</th>
    <!-- <th>Relationship</th> -->
  </tr>

  <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

</table>