css - CSS first-child 没有按预期工作

Question

我正在使用以下 CSS 尝试删除类名为“tblRow”的任何元素的第一个子 div 上的左边框

.tblRow div:first-child{
    border-left: none;
}

<div class="tbl">
  <div class="tblRow">
    <div class="tblCell">Lower limit QTY</div>
    <div class="tblCell">Upper Limit</div>
    <div class="tblCell">Discount</div>
  </div>
  <div class="tblRow">
    <div class="tblCell">1</div>
    <div class="tblCell">5</div>
    <div class="tblCell">25%</div>
  </div>
</div>

这只会从第一行的第一个子 div 中删除左边框。它不会在第二行中删除它。有任何想法吗？

Answer 1

它似乎在小提琴上工作，所以你可能在某处有一个（隐藏的）文本节点。因此.tblRow div:first-of-type { ... }，如果可能的话，我建议从浏览器支持的角度使用。

Answer 2

我通常仅在我对元素几乎没有控制权或无法控制元素时使用 :first-child 和 :nth-child 伪选择器，或者它们在我无法依赖订单的情况下动态填充。此外，由于 :nth-child 是 CSS3，因此您不能依赖完整的浏览器兼容性。如果你可以不用这个伪选择器，我的建议是为此创建一个辅助类。

.tblCell.firstCell{
border-left: none;
}

<div class="tbl">
  <div class="tblRow">
    <div class="tblCell firstCell">Lower limit QTY</div>
    <div class="tblCell">Upper Limit</div>
    <div class="tblCell">Discount</div>
  </div>
  <div class="tblRow">
    <div class="tblCell firstCell">1</div>
    <div class="tblCell">5</div>
    <div class="tblCell">25%</div>
  </div>
</div>