如何定位一系列div中的最后一个孩子？答案

【问题标题】：How to target the last child in each of a series of divs?如何定位一系列div中的最后一个孩子？
【发布时间】：2022-01-03 03:37:59
【问题描述】：

我正在制作一个基于 EJS 的网站，后端使用 Express。我有一个动态填充的页面。我正在尝试编写 scss，它针对每个 div.year-box 中的最后一个 img.collab-img 元素

html 看起来有点像这样，一旦它在浏览器中加载...


<div class="content-box">

      <div class="year-box">
      
        <p>2021</p>
        <p>...</p>

                <a>
                    <div class="credits credits-flex">
                      <span class="no-text-decoration">
                        ...
                      </span>
                        <span class="link-arrow">
                          &nbsp;&nbsp;&nbsp;→
                        </span>
                    </div>
                      <img class="collab-img" src="" alt="">
                </a>
                </br> 
                <a>
                    <div class="credits credits-flex">
                      <span class="no-text-decoration">
                        ...
                      </span>
                        <span class="link-arrow">
                          &nbsp;&nbsp;&nbsp;→
                        </span>
                    </div>
                      <img class="collab-img" src="" alt="">
                  </a>

              </br>
           
      </div>

      <div class="year-box">
      
        <p>2020</p>
        <p>...</p>

                <a>
                    <div class="credits credits-flex">
                      <span class="no-text-decoration">
                        ...
                      </span>
                        <span class="link-arrow">
                          &nbsp;&nbsp;&nbsp;→
                        </span>
                    </div>
                      <img class="collab-img" src="" alt="">
                  </a>
                  </br>
                 <a>
                    <div class="credits credits-flex">
                      <span class="no-text-decoration">
                        ...
                      </span>
                        <span class="link-arrow">
                          &nbsp;&nbsp;&nbsp;→
                        </span>
                    </div>
                      <img class="collab-img" src="" alt="">
                  </a>
                  </br>
                  <a>
                    <div class="credits credits-flex">
                      <span class="no-text-decoration">
                        ...
                      </span>
                        <span class="link-arrow">
                          &nbsp;&nbsp;&nbsp;→
                        </span>
                    </div>
                      <img class="collab-img" src="" alt="">
                  </a>

              </br>
           
      </div>
</div>

我试过了

.year-box {
    img:last-of-type {
       border: 1px solid black;
    }
  }

但它适用于所有图像的样式，而不仅仅是每个年份框中的最后一个。

【问题讨论】：

标签： html css sass nested css-selectors

【解决方案1】：

我回答了我自己的问题。起作用的选择器是...

.year-box a:last-of-type img { }

【讨论】：