[英]Problems with first-child and last-child CSS selectors
我在以下代码中使用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
的元素)。
关于我要去哪里的任何想法?
你可以这样
[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>
[data-sigil="reactions-bling-bar"]:first-child:last-child
定位到一个元素,该元素的数据属性为sigil
,是其父级的第一个和最后一个子级。
我认为您正在寻找[data-sigil="reactions-bling-bar"] > :first-child > :last-child
,它将选择具有该data-sigil
属性的元素的第一个孩子的最后一个孩子。 。
你可以试试这个
#u_1_k div div:last-child
{
/* css as you wants */
}
您的CSS选择器没有任何作用,因为:
[data-sigil="reactions-bling-bar"]
以div为目标,该div的属性为data-sigil
,其值为reactions-bling-bar
; [data-sigil="reactions-bling-bar"]:first-child
对象将div定位为具有属性data-sigil
的div,该属性的值是其容器的第一个子对象,且其值reactions-bling-bar
AND; [data-sigil="reactions-bling-bar"]:first-child
将div定位为div,其属性为data-sigil
,其值为data-sigil
reactions-bling-bar
AND,这是其容器的第一个孩子,AND是其容器的最后一个孩子它的容器。 这行不通。
如果您无法修改HTML,那么我认为您可以做您想做的事,也许可以:
[data-sigil="reactions-bling-bar"] > div > div:last-child {
/* CSS rules here */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.