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's的颜色，其中包含foo类

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

但它没有选择任何东西。请检查此fiddle。

如何选择课程li's的第一个和最后一个foo。如果用css不可能，那我怎么能用jQuery做呢。

Answer 1

我认为没有针对此的css选择器解决方案，您可以使用jQuery来分配类

.selected {
    color: red;
}

然后

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

演示：Fiddle

Answer 2

这样做

$('.list li.foo').filter(':first, :last').css( "color", "red" );

或

$('.list li.foo:first,.list li.foo:last').css( "color", "red" );

Answer 3

我认为只用CSS就可以做到这一点，但jQuery很简单。这是一种方式：

var $lis = $("ul.list li.foo");
$lis.first().addClass("someClass");
$lis.last().addClass("someClass");

使用：

.someClass {
    color: red;
}

演示：http://jsfiddle.net/2T2yv/10/

或稍微不同的解决方案，不重复.addClass()：

var $lis = $("ul.list li.foo");
$lis.first().add($lis.last()).addClass("someClass");

Answer 4

.list .foo:nth-child(2n)
{
    color: green;
}

和Html是

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

Fiddle

为了更好地理解nth-child（伪选择器），您可以浏览此http://css-tricks.com/how-nth-child-works/

Answer 5

您可以使用jQuery：

$('.list li.foo').first().css('color', 'red');
$('.list li.foo').last().css('color', 'red');

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

5 个答案: