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

问题描述：

我正在使用CSS来定位以下代码中的特定元素。我想要定位的元素是第一个div中的最后一个元素（.1g07）。因为类名是动态的，所以我需要在不参考.1g07的情况下执行此操作。第一个孩子和最后一个孩子的CSS选择器的问题

这里是我使用的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元素）。

关于我要去哪里的任何想法都是错误的？

答

[data-sigil="reactions-bling-bar"]:first-child:last-child指标与数据属性的元素叫做sigil既其父的第一个和最后一个孩子。

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

你的CSS是正确的：https://jsfiddle.net/pzy1rpou/ ...但是在测试结束时它会失败。 – BugHunterUK

固定。 HTML的源顺序通常因许多因素而不同。尽管你的解决方案有效，所以我最好接受。 – BugHunterUK

直接后代选择器（'>'）是不必要的，因为只有1个第一个和1个最后一个。 – LGSon

答

你可以这样做

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

答

你可以试试这个

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

在这种情况下，不能使用ID和类来选择元素。这些是动态ID和类，并将改变。 – BugHunterUK

答

你的CSS选择器的目标没有什么，这是因为：

[data-sigil="reactions-bling-bar"]目标与属性具有值reactions-bling-bardata-sigil股利;
[data-sigil="reactions-bling-bar"]:first-child以属性data-sigil为目标的div具有值reactions-bling-bar并且它是其容器的第一个孩子;
[data-sigil="reactions-bling-bar"]:first-child以属性data-sigil为目标的div具有值reactions-bling-bar并且它是其容器的第一个孩子，它是其容器的最后一个孩子。

这是行不通的。

如果您不能修改HTML，我不认为你可以做你想做什么，也许有：

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

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

相关推荐