Difference between same kind of CSS selections
===

What is the difference between following different ways of CSS selections. To me they seem to be different ways of doing same thing **with same performance costs**:

    $("#list li").hover(function () {
                    $(this).addClass("red");
    }, function (){
            $(this).removeClass("red");
    });

With a greater than symbol:

    $("#list > li").hover(function () {
                    $(this).addClass("red");
    }, function (){
            $(this).removeClass("red");
    });

Add now with context:

    $("li", $("#list")).hover(function () {
                    $(this).addClass("red");
    }, function (){
            $(this).removeClass("red");
    });

