<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*通配选择符*/ * { padding: 0; margin: 0;} /*类型选择符*/ ul,li { list-style: none; text-decoration: none; float: left; margin: 20px 40px; } /*类选择符*/ .box { width: 100%; } .aa { color:darkgreen; } /*ID选择符*/ #bb { color: red; } /*属性选择符*/ li[class="cc"] { color: darkmagenta; } /*子对象选择符*/ li > span { color: darkgreen; } /*包含选择符*/ li p { color: darkorchid; } </style> </head> <body> <div class="box"> <ul> <li class="aa">首页</li> <li id="bb">产品介绍</li> <li class="cc">成功案例</li> <li><span>关于我们</span></li> <li><p>关于我们</p></li> <li>联系我们</li> </ul> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例