第一個孩子和最後一個孩子的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元素）。

關於我要去哪裏的任何想法都是錯誤的？

來源

2016-02-29 BugHunterUK

[data-sigil="reactions-bling-bar"]:first-child:last-child指標與數據屬性的元素叫做sigil既其父的第一個和最後一個孩子。

我認爲你正在尋找[data-sigil="reactions-bling-bar"] > :first-child > :last-child，它會選擇該元素的第一個子元素的最後一個子元素與該data-sigil屬性。

來源

2016-02-29 13:35:29 ajm

你的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>

來源

2016-02-29 13:35:27 LGSon

你可以試試這個

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

來源

2016-02-29 13:37:02

在這種情況下，不能使用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 */ 
}

來源

2016-02-29 13:43:11 Adysone

第一個孩子和最後一個孩子的CSS選擇器的問題

回答

相關問題