Css：用class给最后一个元素添加样式（没有js）

Question

我在创建 css (sass) select 或 select 列表中具有 class 的最后一个元素时遇到问题 (没有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>

需要 select 最后 post 固定 class（即 2）。

fiddle

Answer 1

问题：

事实上 :last-child 不起作用，因为它只选择容器的最后一个子容器，不管它有什么 class，而 last-of-type 不起作用，因为它只从您的容器中选择最后一个具有特定类型的元素。

选择：

所以基本上最好的解决方案是为这样的元素使用专用的 class:

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

Css：用class给最后一个元素添加样式（没有js）

Css: Add style to last element with class (without js)

css

css-selectors

selector