实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
