Question

不确定仅使用CSS是否可行。任何帮助表示赞赏。

我的HTML看起来像这样：

<div class="row invoice with-tax">
    <div class="mobile-body-header mobile"><strong>Items</strong></div>
    <div class="invoice-item">
        <div class="item-filler"></div>
        <div class="quantity">2</div>
        <div class="amount-mobile total">$13,336.60</div>
        <div class="item-number">ABC123</div>
        <div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
        <div class="amount-item-ex">$153.00</div>
        <div class="amount-subtotal">$306.00</div>
        <div class="amount-tax">$30.60</div>
        <div class="amount-total total">$13,336.60</div>
        <div class="item-filler"></div>
    </div>
    <div class="invoice-item">
        <div class="item-filler"></div>
        <div class="quantity">2</div>
        <div class="amount-mobile total">$13,336.60</div>
        <div class="item-number">ABC123</div>
        <div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
        <div class="amount-item-ex">$153.00</div>
        <div class="amount-subtotal">$306.00</div>
        <div class="amount-tax">$30.60</div>
        <div class="amount-total total">$13,336.60</div>
        <div class="item-filler"></div>
    </div>
    ....
 </div>

我正在尝试使用类border-bottom删除上一个div中title类的最终div invoice-item。这些基本上是div个元素的行，这些元素的数量可以不同（因为它和我正在处理的发票）。

我尝试过以下示例但未成功。虽然我可以在下面的@Steve中看到它在小提琴中工作，但当放在CSS的其余部分内时，它不会删除最后一个边框。我可以根据以下示例确认边框设置正好。

div.invoice-item > div.title {
    border-bottom: 2px dotted red;
}
div.invoice-item:last-child > div.title {
    border: none !important; 
}

也

div.invoice-item > div.title {
    border-bottom: 2px dotted red;
}
div.invoice > div.invoice-item:last-child > div.title {
    border: none !important; 
}

也

div {
  border-bottom: 1px solid red;
}
div.invoice-item:last-of-type > div.title {
  border: none;
}

Answer 1

由于它是电子邮件模板，因此有些clients不支持:last-child。不要使用:last-child，而是尝试将新类添加到要选择的div。

Answer 2

尝试div.invoice-item:last-of-type > div.title { border: none; }

<强>更新

由于这是一个未知的CSS邪恶，这里有一个可行的技巧：

div.invoice-item:last-of-type > div.title.title { border: none !important; }

＆＃13;

div {
  border-bottom: 1px solid red;
}
/* div.invoice-item:last-of-type > div.title {
  border: none;
} */

div.invoice-item:last-of-type > div.title.title {
  border: none !important;
}

＆＃13;

<div class="row invoice with-tax">
  <div class="mobile-body-header mobile"><strong>Items</strong>
  </div>
  <div class="invoice-item">
    <div class="item-filler"></div>
    <div class="quantity">2</div>
    <div class="amount-mobile total">$13,336.60</div>
    <div class="item-number">ABC123</div>
    <div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
    <div class="amount-item-ex">$153.00</div>
    <div class="amount-subtotal">$306.00</div>
    <div class="amount-tax">$30.60</div>
    <div class="amount-total total">$13,336.60</div>
    <div class="item-filler"></div>
  </div>
  <div class="invoice-item">
    <div class="item-filler"></div>
    <div class="quantity">2</div>
    <div class="amount-mobile total">$13,336.60</div>
    <div class="item-number">ABC123</div>
    <div class="title"><span class="quantity-mobile">2 x </span>Dance classes and tutoring for upcoming Michael Jacksons</div>
    <div class="amount-item-ex">$153.00</div>
    <div class="amount-subtotal">$306.00</div>
    <div class="amount-tax">$30.60</div>
    <div class="amount-total total">$13,336.60</div>
    <div class="item-filler"></div>
  </div>
  ....
</div>

＆＃13;

CSS目标类

2 个答案: