$(function(){

            $('p:first').css('border','5px solid red');
            $('p:last').css('border','5px dashed blue');
            $('p:first+p').css('border','5px solid gray')
            $('#item01 li:odd').css('border','5px solid green')
            $('#item01 li:even').css('border','5px dashed blue')
            $('#item02 li:nth-child(2)').css('border','5px dashed blue')
            $('#item03 li:nth-child(3n+2)').css('border','5px solid blue')
            $('#item04 :gt(4)').css('border','5px solid red')
            $('#item04 :lt(3)').css('border','5px solid gray')
            $('#item04 :eq(2)').css('border','5px dashed blue')
            $('#item05 li:last-child').css('border','5px solid gray')
            $('#item03 li:last-child').css('border','5px solid red')
        })

            <h3>jQuery基础过滤器:first和:last示例</h3>
    <hr>
    <p id="p1">这是第一个段落元素。</p>
    <p>这是第二个段落元素。</p>
    <p>这是第三个段落元素。</p>
    
    <ul id="item01">
    li:nth-child(odd)
    筛选奇数项
        <li>Apple</li>
        <li>Pear</li>
        <li>Grape</li>
        <li>Pineapple</li>
    </ul>
    <ul id="item02">
    li:nth-child(2)
    筛选第二个元素
        <li>Milk</li>
        <li>Bread</li>
        <li>Coffee</li>
    </ul>
    <ul id="item03">
    li:nth-child(3n+2)
    筛选第3n+2个元素
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
        <li>Yellow</li>
        <li>Orange</li>
        <li>Purple</li>
    </ul>
    <ul id="item04">
    eq gt lt
        <li>Milk</li>
        <li>Bread</li>
        <li>Coffee</li>
        <li>Bread</li>
        <li>Coffee</li>
        <li>Bread</li>
        <li>Coffee</li>
    </ul>
    <ul id="item05">
    last-child
        <li>Milk</li>
        <li>Bread</li>
        <li>Coffee</li>
        <li>Coffee</li>
    </ul>