0

次のCSSを使用して、「tblR​​ow」と呼ばれるクラスを持つ要素の最初の子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 から左境界のみを削除します。2 行目では削除されません。何か案は？

4

2 に答える 2

0

私は通常、要素をほとんどまたはまったく制御できない場合、または順序に依存できない動的に入力される場合にのみ、: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>
于 2013-06-05T20:09:14.730 に答える