1.: First: Get the initial element
2, example
(1) Source code
First.html:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>:first selector </title>
<script type= "Text/javascript" src= "Jquery-2.0.3.js" ></script>
<style type= "Text/css" >
body{
width:7%;
height:100%;
font-size:24px;
Font-weight:bold;
Background-color: #CCCCFF;
Text-align:center;
}
</style>
<script type= "Text/javascript" >
$ (function () {
Set the background color of the first LI in UL and apply it to: Primary selector
$ ("Li:first"). CSS ("Background-color", "#00DDDD");
Sets the background color of the first Li in ol and applies it to: Primary selector
$ (". Two Li:first"). CSS ("Background-color", "#0000CC");
Sets the font color of the first Li in ol, and applies to: primary Selector
$ (". Two Li:first"). CSS ("Color", "#FFFFFF");
});
</script>
<body>
<div>
<ul class= "One" >
<li> Apple </li>
<li> Pear </li>
<li> Orange </li>
<li> Watermelon </li>
<li> Litchi </li>
<li> Grape </li>
<li> Banana </li>
<li> cantaloupe </li>
</ul>
<ol class= "Two" >
<li> Apple </li>
<li> Pear </li>
<li> Orange </li>
<li> Watermelon </li>
<li> Litchi </li>
<li> Grape </li>
<li> Banana </li>
<li> cantaloupe </li>
</ol>
</div>
</body>
(2) display the results as shown below
