第一个孩子和最后一个孩子 CSS 选择器的问题答案

【问题标题】：Problems with first-child and last-child CSS selectors第一个孩子和最后一个孩子 CSS 选择器的问题
【发布时间】：2016-02-29 21:50:16
【问题描述】：

我正在使用 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 的元素）。

关于我哪里出错了有什么想法吗？

【问题讨论】：

标签： html css

【解决方案1】：

你可以这样做

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

示例 sn-p

[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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

你的 CSS 是正确的：jsfiddle.net/pzy1rpou ...但是在测试它时我的结果失败了。
已修复。 HTML 的源代码顺序通常因多种因素而异。你的解决方案虽然有效，所以我最好接受。
直接后代选择器 (>) 是不必要的，因为只有第一个和最后一个。

【解决方案3】：

你可以试试这个

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

【讨论】：

在这种情况下无法使用 ID 和类来选择元素。这些是动态 ID 和类，会发生变化。

【解决方案4】：

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

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

这行不通。

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

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

【讨论】：