[英]Problems with first-child and last-child CSS selectors
I'm using CSS to target a specific element in the following code. 我在以下代码中使用CSS定位特定元素。 The element I want to target is the last element in the first div (
.1g07
). 我要定位的元素是第一个div(
.1g07
)中的最后一个元素。 I need to do this without referring to .1g07
as the class name is dynamic. 我不需要参考
.1g07
因为类名是动态的。
Here is the CSS I use: 这是我使用的CSS:
[data-sigil="reactions-bling-bar"]:first-child:last-child
And the HTML: 和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>
It's not targetting this element though (in this case the element that contains the number 48
). 但是,它并不是针对此元素的(在本例中为包含数字
48
的元素)。
Any ideas on where I am going wrong? 关于我要去哪里的任何想法?
You can do like this 你可以这样
[data-sigil="reactions-bling-bar"] div div:last-child
[data-sigil="reactions-bling-bar"] :first-child :last-child
Sample snippet 样本片段
[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
targets an element with a data attribute called sigil
that is both the first and last child of its parent. [data-sigil="reactions-bling-bar"]:first-child:last-child
定位到一个元素,该元素的数据属性为sigil
,是其父级的第一个和最后一个子级。
I think you're looking for [data-sigil="reactions-bling-bar"] > :first-child > :last-child
, which would select the last child of the first child of the element with that data-sigil
attribute. 我认为您正在寻找
[data-sigil="reactions-bling-bar"] > :first-child > :last-child
,它将选择具有该data-sigil
属性的元素的第一个孩子的最后一个孩子。 。
you can try this 你可以试试这个
#u_1_k div div:last-child
{
/* css as you wants */
}
your CSS selector targets nothing, because: 您的CSS选择器没有任何作用,因为:
[data-sigil="reactions-bling-bar"]
targets the div with the attribute data-sigil
having the value reactions-bling-bar
; [data-sigil="reactions-bling-bar"]
以div为目标,该div的属性为data-sigil
,其值为reactions-bling-bar
; [data-sigil="reactions-bling-bar"]:first-child
targets the div with the attribute data-sigil
having the value reactions-bling-bar
AND which is the first child of its container; [data-sigil="reactions-bling-bar"]:first-child
对象将div定位为具有属性data-sigil
的div,该属性的值是其容器的第一个子对象,且其值reactions-bling-bar
AND; [data-sigil="reactions-bling-bar"]:first-child
targets the div with the attribute data-sigil
having the value reactions-bling-bar
AND which is the first child of its container AND which is the last child of its container. [data-sigil="reactions-bling-bar"]:first-child
将div定位为div,其属性为data-sigil
,其值为data-sigil
reactions-bling-bar
AND,这是其容器的第一个孩子,AND是其容器的最后一个孩子它的容器。 This can't work. 这行不通。
If you can't modify the HTML, I dont think you can do what you want, maybe with: 如果您无法修改HTML,那么我认为您可以做您想做的事,也许可以:
[data-sigil="reactions-bling-bar"] > div > div:last-child {
/* CSS rules here */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.