html - 删除特定的 td 边框？

Question

我想知道为什么在 css color: red; 中使用或不使用 .container 都能正确呈现。代码背后发生了什么，我如何在不删除 .container 的情况下获得第二张图片？

.container table {
  border-collapse: collapse;
  border: solid 1px #000;
}
.container table td {
  border: solid 1px #000;
}
.no-border-right {
  border-right: solid 1px #FFF;
  color: red;
}

<div class="container">
  <table>
    <tr>
      <td class="no-border-right">One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
  </table>
</div>

Answer 1

你可以做到

.container table td.no-border-right {
        border-right: solid 1px #FFF;
        color: red;
 }

.container table td 比 .no-border-right 更具特异性

除非绝对必要，否则最好不要使用 !important。首先尽可能在特定规则内工作

结帐 this guide还有这个calculator of specificity