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