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)。

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

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>