的CSS：添加樣式最後一個元素與類（無JS）

Question

我有創建CSS（SASS）選擇，其選擇在列表類最後一個元素（沒有JavaScript）一個問題：

<ul> 
    <li class="post pinned">1</li> 
    <li class="post pinned">2</li> 
    <li class="post">3</li> 
    <li class="post">4</li> 
</ul> 

需要選擇固定班級的最後一篇文章（即2）。

fiddle

Answer 1

問題：

其實:last-child不工作，因爲它只能選擇容器的最後一個孩子，不管有什麼樣的課，last-of-type千萬不要因爲它的工作只從容器中選擇具有特定類型的最後一個元素。

備選：

所以基本上最好的解決辦法就是使用這種元素的專用類：

.micropost {} .micropost.pinned { 
 
    color: red; 
 
} 
 
.micropost:last-child { 
 
    color: green; 
 
} 
 
.lastPinned { 
 
    background-color: green; 
 
}

<ul> 
 
    <li class="micropost pinned">1</li> 
 
    <li class="micropost pinned lastPinned">2</li> 
 
    <li class="micropost">3</li> 
 
    <li class="micropost">4</li> 
 
    <li class="micropost">5</li> 
 
    <li class="micropost">6</li> 
 
    <li class="micropost">7</li> 
 
</ul>