白云岛资源网 Design By www.pvray.com
1.用法不同:比如要找div的class名为con中p标签,子代选择器用法:div.con>p{color:red;}
后代选择器:.con p{color:red;}
2.兼容性:ie6不支持子代选择器
3.所达到的效果不同
看下图用子代选择器效果:
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>CSS的子选择器</title>
<style type="text/css">
*{margin:0;padding:0;}
div.con>div>p{color:red;}
</style>
</head>
<body>
<div class='con'>
<div>p
<p>span1
<div>
<p>span2</p>
</div>
</p>
</div>
</div>
</body>
</html>
看后代选择器效果:
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>CSS的子选择器</title>
<style type="text/css">
*{margin:0;padding:0;}
.con div p{color:red;}
</style>
</head>
<body>
<div class='con'>
<div>
<p>span1
<div>
<p>span2</p>
</div>
</p>
</div>
</div>
</body>
</html>
后代选择器:.con p{color:red;}
2.兼容性:ie6不支持子代选择器
3.所达到的效果不同
看下图用子代选择器效果:
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>CSS的子选择器</title>
<style type="text/css">
*{margin:0;padding:0;}
div.con>div>p{color:red;}
</style>
</head>
<body>
<div class='con'>
<div>p
<p>span1
<div>
<p>span2</p>
</div>
</p>
</div>
</div>
</body>
</html>
看后代选择器效果:
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>CSS的子选择器</title>
<style type="text/css">
*{margin:0;padding:0;}
.con div p{color:red;}
</style>
</head>
<body>
<div class='con'>
<div>
<p>span1
<div>
<p>span2</p>
</div>
</p>
</div>
</div>
</body>
</html>
白云岛资源网 Design By www.pvray.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
白云岛资源网 Design By www.pvray.com
暂无评论...