1.: first: Get the first element
2. Example
(1) Source Code
First.html:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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 the: first selector.
$ ("Li: first" ).css ("background-color", "#00 DDDD ");
// Set the background color of the first li in ol and apply it to the: first selector.
$ (". Two li: first" ).css ("background-color", "# 0000CC ");
// Set the font color of the first li in ol and apply it to: first Selector
$ (". Two li: first" ).css ("color", "# FFFFFF ");
});
</Script>
</Head>
<Body>
<Div>
<Ul class = "one">
<Li> Apple </li>
<Li> pears </li>
<Li> orange </li>
<Li> watermelon </li>
<Li> litchi </li>
<Li> grape </li>
<Li> bananas </li>
<Li> cantaloupe </li>
</Ul>
<Ol class = "two">
<Li> Apple </li>
<Li> pears </li>
<Li> orange </li>
<Li> watermelon </li>
<Li> litchi </li>
<Li> grape </li>
<Li> bananas </li>
<Li> cantaloupe </li>
</Ol>
</Div>
</Body>
</Html>
(2) The display result is as follows: