如何改變最後一個元素的字體顏色與特定的類

Question

這裏是我的html

.user-container div.user-left:last-child{ 
 
    color:red; 
 
} 
 
.user-container div.user-right:last-child{ 
 
    color:red; 
 
}

<div class="user-container"> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text. this is user left last</div> 
 
    <div class="user user-right">Some text.</div> 
 
    <div class="user user-right">Some text.</div> 
 
    <div class="user user-right">Some text.</div> 
 
    <div class="user user-right">Some text. this is user right last</div> 
 
</div>

有沒有辦法來改變類的最後一個孩子的字體顏色「用戶左」和使用CSS的類'用戶權利'？在這裏用戶權利：最後一個孩子工作，但用戶離開：最後一個孩子沒有working.any想法？

Answer 1

試試這個

.user-container div.user-left:nth-last-child(5) { 
    background: red; 
    } 

Answer 2

這不是最後一個孩子，因爲用戶正確的div也相同父的孩子。你想要的選擇器是：last-of-type，但只適用於元素，而不適用於class。我不認爲你可以在不改變html結構的情況下在純CSS中做到這一點。另一個答案 - 使用nth-last-child - 僅適用於你的例子。只要添加或刪除任何元素，它就會中斷。

你可以在這裏找到更多的信息：CSS: How to say .class:last-of-type [classes, not elements!]

Answer 3

因爲最後一子選擇僅適用於父容器:)

你應該附上用戶左轉進入特定容器 left和用戶權利 right

.left div:last-child { 
 
    color:red; 
 
} 
 
.right div:last-child { 
 
    color:red; 
 
}

<div class="user-container"> 
 
    <div class="left"> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text.</div> 
 
    <div class="user user-left">Some text. this is user left last</div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="user user-right">Some text.</div> 
 
    <div class="user user-right">Some text.</div> 
 
    <div class="user user-right">Some text.</div> 
 
    <div class="user user-right">Some text. this is user right last</div> 
 
    </div> 
 
</div>

Answer 4

使用CSS的:last-of-type僞選擇

.user-left:last-of-type, .user-right:last-of-type { color: red; }