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>

Answer 2

[data-sigil="reactions-bling-bar"]:first-child:last-child定位一个名为sigil的数据属性的元素，该属性既是其父级的第一个也是最后一个子级。

我认为你正在寻找[data-sigil="reactions-bling-bar"] > :first-child > :last-child，它会选择具有data-sigil属性的元素的第一个孩子的最后一个孩子。

Answer 3

你可以试试这个

#u_1_k div div:last-child
{
/* css as you wants */
}

Answer 4

你的CSS选择器没有任何目标，因为：

[data-sigil="reactions-bling-bar"]定位div，其属性data-sigil的值为reactions-bling-bar;
[data-sigil="reactions-bling-bar"]:first-child定位div，其属性data-sigil的值为reactions-bling-bar并且是其容器的第一个子项;
[data-sigil="reactions-bling-bar"]:first-child定位div，其属性data-sigil的值为reactions-bling-bar，这是其容器的第一个子项，也就是其容器的最后一个子项。

这无效。

如果你无法修改HTML，我不认为你可以做你想做的事，也许是：

[data-sigil="reactions-bling-bar"] > div > div:last-child {
    /* CSS rules here */
}

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

4 个答案: