一篇关于div与>div的区别小结

网络
这个小城，步入冬天就立马变了颜色，还没来得及等我换件衣服就开演了。如何扮演好自己的角色，我还没想好，我不适合做主角，只能在配角方面下功夫，极力配合主角旦，生的表演。红红火火的演完这场戏，让北方的冬天刮目相看。

两者之间的区别：例如div span得到的是div下所有的span元素，而div>span则是取得的div下第一级的span元素。

示例代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  3. <htmllang="en"xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metacharset="utf-8"/>
  6. <scriptsrc="jquery-1.7.2.min.js"></script>
  7. <title></title>
  8. <script>
  9. $(document).ready(function(){
  10. $("divspan").css("font-size","20px");
  11. //$("div>span").css("font-size","20px");
  12. });
  14. </script>
  15. </head>
  16. <body>
  17. <div>
  18. <p><span>博客园1</span></p>
  19. <span>博客园2</span>
  20. <span>博客园3</span>
  21. </div>
  22. </body>
  23. </html>

结果是所有的span元素都变为20px。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  3. <htmllang="en"xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metacharset="utf-8"/>
  6. <scriptsrc="jquery-1.7.2.min.js"></script>
  7. <title></title>
  8. <script>
  9. $(document).ready(function(){
  10. //$("divspan").css("font-size","20px");
  11. $("div>span").css("font-size","20px");
  12. });
  14. </script>
  15. </head>
  16. <body>
  17. <div>
  18. <p><span>博客园1</span></p>
  19. <span>博客园2</span>
  20. <span>博客园3</span>
  21. </div>
  22. </body>
  23. </html>

结果是博客园2、博客园3字体变为20px,博客园1则未发生变化。

以上这篇关于div与>div的区别小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/JsonZhangAA/archive/2016/05/04/5457918.html

您可能有感兴趣的文章
一篇关于CSS浮动与取消浮动的问题
一篇关于CSS中定位的小结
一个一篇关于border-radius值设置的问题记录
一篇关于css中line-height(行高)设置无效的问题的如何解决方法
一篇关于CSS引入方式的详细见解小结