Question

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

.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 psuedo选择器，当我对元素几乎没有控制权时，或者在我不能依赖订单的情况下动态填充它们。此外，因为：nth-child是CSS3，您不能依赖完整的浏览器兼容性。如果你没有这个psuedo选择器，我的建议就是为此目的创建一个二级类。

.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>

CSS first-child没有按预期工作

2 个答案: