一些新手不知使用子选择器是提高效率的一种途径，可以减少很多class的定义，看看下面这个例子：
复制代码 代码示例:
〈div id=subnav〉
〈ul〉
〈li class=subnavitem〉〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemselected〉 〈a href=# class=subnavitemselected〉 Item 1〈/a〉 〈/li〉
〈li class=subnavitem〉〈a href=# class=subnavitem〉 Item 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉
以上代码的css定义为：
复制代码 代码示例:
div#subnav ul { // Some styling // }
div#subnav ul li.subnavitem { // Some styling // }
div#subnav ul li.subnavitem a.subnavitem { // Some styling // }
div#subnav ul li.subnavitemselected { // Some styling // }
div#subnav ul li.subnavitemselected a.subnavitemselected { // Some styling // }
用下面的代码替代上面的：
复制代码 代码示例:
〈ul id=subnav〉
〈li〉a href=#〉 Item 1〈/a〉 /li〉
〈li class=sel〉a href=#〉 Item 1〈/a〉/li〉
〈li〉a href=#〉 Item 1〈/a〉〈/li〉
〈/ul〉
css定义为：
复制代码 代码示例:
#subnav { // Some styling // }
#subnav li { // Some styling // }
#subnav a { // Some styling // }
#subnav .sel { // Some styling // }
#subnav .sel a { // Some styling // }
备注：使用子选择器可以让代码及css简单整洁、易于阅读。
