[jquery selector: First:first-child] Instance Analysis:: Differences in element selection between First:first-child

Example analysis:: Differences in element selection between First:first-child

Instance:

<! DOCTYPE html>;} Html{font:15px/1.2em ' Courier New '; color: #666;} div > *{margin:10px 0; cursor:pointer;}    #demo {width:750px;margin:75px Auto;} button{padding:5px 15px;border:0;outline:none;margin-top:-5px;border-radius:2px;font:400 12px/1.2em ' Courier New ';} . active{background-color:yellow;transition:. 3s;} . Hover{background-color:red;transition:. 3s} p{text-indent:8px;}</style><script type= ' Text/javascript ' >    $(function(){      $(' #first '). Click (function(){        $(' P:first '). Toggleclass (' hover '));      }); $(' #firstChild '). Click (function(){        $(' P:first-child '). Toggleclass (' active ');    }); });</script>inchDiv.</p> <p>the last ParagraphinchThe div.</p> </div> <div style= ' border:1px solid #3695BC ' > <p>the first P AragraphinchAnother div.</p> <p>the last paragraphinchAnother div.</p> </div> <button id= ' first ' >:first</button> <button id= ' Fir Stchild ' >:first-child</button> </div></body>

[jquery selector: First:first-child] Instance Analysis:: Differences in element selection between First:first-child