基础 子元素选择器只能一级一级向下寻找，不能跨越

 HTML代码：

XML/HTML Code复制内容到剪贴板 <p>       this is my <h3><i>w</i>eb</h3> page.    </p>  

CSS代码：

CSS Code复制内容到剪贴板 p>h3 { color: purple; } p>h3>i { font-size: 50px; }   

1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

2、子元素选择器使用大于号">"做为连接符。

示例1：

XML/HTML Code复制内容到剪贴板 <html>      <head>       <style type="text/css">           h1 > h3 {                color: red;            }        </style>   </head>      <body>       <h1>This is <h3>very</h3> <h3>very</h3> important.</h1>       <h1>This is <em>really <h3>very</h3></em> important.</h1>   </body>      </html>  

示例2 

XML/HTML Code复制内容到剪贴板 <html>      <head>       <style type="text/css">           table.company td > p {                color: red;            }        </style>   </head>      <body>       <table class=company>           <tr>               <td>                   <p>hello</p>               </td>           </tr>       </table>       <table>           <tr>               <td>                   <p>world</p>               </td>           </tr>       </table>   </body>      </html>  

举例讲解CSS的子元素选择器用法