Question

尝试在类中调用链接中的最后一个元素。但是面临的挑战是，我不能只使用card_content的“最后类型”或“最后一个孩子”，因为存在一个.card版本而不是链接。

a.card:link .card_content:last-of-type{
  margin-bottom: 0;
  background-color: #ff6600;
}


.card{
  width: 50%;
  height: 50%;
  border: 0.5px solid #efefef;
}

<a href="#" class="card" >
<div class="card_icon">image go here</div>
<div class="card_content">
<h3>I am a header</h3>
<p>I am some description.</p>
<p>Need this to be 0 on margin-bottom</p>
</div>
<div class="card_line">
Click</div>
</a>

<div class="card" >
<div class="card_content">
<p>none link version</p>
<p>Need this to be 0 on margin-bottom</p>
</div>
<div class="card_line">
Click</div>
</div>

Answer 1

:last-of-type将在元素上起作用，但不适用于类。

Mozilla documentation说：

：last-of-type CSS伪类表示一组同级元素中该类型的最后一个元素。

This thread也对此进行了讨论。

Answer 2

因为last-of-type在类上不起作用，所以这是您可以通过纯CSS获得的最接近的值。此解决方案假定.card_content的最后一个实例是末尾的第二个元素。

a.card[href] .card_content:nth-last-of-type(2) {
  margin-bottom: 0;
  background-color: #ff6600;
}

.card {
  width: 50%;
  height: 50%;
  border: 0.5px solid #efefef;
}

<a href="#" class="card">
  <div class="card_icon">image go here</div>
  <div class="card_content">
    <h3>I am a header</h3>
    <p>I am some description.</p>
    <p>Need this to be 0 on margin-bottom</p>
  </div>
  <div class="card_content">
    <h3>I am a header</h3>
    <p>I am some description.</p>
    <p>Need this to be 0 on margin-bottom</p>
  </div>
  <div class="card_line">
    Click</div>
</a>

<div class="card">
  <div class="card_content">
    <p>none link version</p>
    <p>Need this to be 0 on margin-bottom</p>
  </div>
  <div class="card_line">
    Click</div>
</div>

链接内的最后一个元素，类内

2 个答案: