html - first-child 和 last-child CSS 选择器的问题

Question

我在以下代码中使用 CSS 定位特定元素。我要定位的元素是第一个 div (.1g07) 中的最后一个元素。我需要在不引用 .1g07 的情况下执行此操作，因为类名是动态的。

这是我使用的 CSS:

[data-sigil="reactions-bling-bar"]:first-child:last-child

和 HTML:

<a href="#" data-sigil="feed-ufi-trigger">
    <div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
    <div class="_1g07">
        <div class="_1g05" style="z-index:3">
            <i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
        </div>
        <div class="_1g05" style="z-index:2">
            <i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
        </div>
        <div class="_1g05" style="z-index:1">
            <i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
        </div>
        <div class="_1g06">48</div>
    </div>
    <div class="_1j-b"><span class="_1j-c">12 comments</span></div> 
    </div>
</a>

虽然它没有针对此元素(在本例中是包含数字 48 的元素)。

关于我哪里出错的任何想法？

Answer 1

你可以这样做

[data-sigil="reactions-bling-bar"]  div div:last-child
[data-sigil="reactions-bling-bar"] :first-child :last-child

示例片段

[data-sigil="reactions-bling-bar"]  div div:last-child
{
  color: red
}

<a href="#" data-sigil="feed-ufi-trigger">
  <div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
    <div class="_1g07">
      
      <div class="_1g05" style="z-index:3">
        <i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
      </div>
      <div class="_1g05" style="z-index:2">
        <i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
      </div>
      <div class="_1g05" style="z-index:1">
        <i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
      </div>
      
      <div class="_1g06">48</div>
      
    </div>
    <div class="_1j-b"><span class="_1j-c">12 comments</span></div> 
  </div>
</a>