第一個和最后一個CSS選擇器的問題

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為目標，該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 */
}