html - 如何选择具有特定类的第一个元素

Question

我有以下列表

    <ul class="list">
        <li>1</li>
        <li class="foo">2</li>
        <li class="foo">3</li>
        <li class="foo">4</li>
        <li>5</li>
    </ul>

我想使用 css 更改第一个和最后一个 li 的 的颜色，它有 foo 类

.list .foo:first-child,
.list .foo:last-child {
  color: red;
}

但它什么也没有选择。检查这个fiddle .

如何选择第一个和最后一个 li 的 类 foo。如果用 css 做不到，那我怎么用 jQuery 做呢。

Answer 1

我不认为有一个 css 选择器解决这个问题，你可以使用 jQuery 来分配一个类

.selected {
    color: red;
}

然后

$('.list li.foo').filter(':first, :last').addClass('selected')

演示:Fiddle