Difference between .children() and .find() matched items when using a child selector

Difference between .children() and .find() matched items when using a child selector

I noticed a difference in the behavior of the children() method versus the find() method, if the selector is a 'child selector'.

In the example of the child selector documentation (http://api.jquery.com/child-selector/) change the script to:
<script>
// Child selector gives trouble
$("ul.topnav").children("ul.topnav > li").css("border", "3px double red"); // matches
$("ul.topnav").find("ul.topnav > li").css("border", "3px double blue");  // doesn't match
$("ul.topnav > li", "ul.topnav").css("border", "3px double green"); // doesn't match

// Simple selector works fine
$("ul.topnav").find("li:eq(1)").css("border-style", "solid");
$("ul.topnav").children("li:eq(2)").css("border-style", "dotted");
</script>

You will notice that the "ul.topnav > li"-borders become red, indicating that find() and 'context' did not match.
I added the "li:eq(x)" selector to show that find() covers (at least) the same elements as children() does