黑马程序员技术交流社区

标题: CSS选择器之相邻选择器疑问 [打印本页]

作者: PDH 时间: 2017-5-19 15:26
标题: CSS选择器之相邻选择器疑问
本帖最后由 PDH 于 2017-5-19 15:27 编辑

<!DOCTYPE html>
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>jQuery</title>
      <script type="text/javascript" src="JS/jquery-3.2.1.js"></script>
      <script type="text/javascript">
            $(function(){
                     $("*").css("font-size","20px");
                     $("div").addClass("one");
                     $("#div1").addClass("two");
                     $("#div2,#div3").addClass("three");
                     $("h3,p").css("color","red").attr("align","center");
                     $("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个，同时应用one和three类的元素共有"+$(".one[class=three]").length+"个。");
                     //$("#span1").html("div元素一共有"+$("body>div#div3").length+"个")
                     $("#span1").html("div元素一共有"+$("body span").length+"个")
                     //$("#div2+#div3").html("相邻元素选择器")
                     //$("#div2~#div3").html("相邻同辈所有元素选择器")
                     $("div>span").html("test");       //前面两句放开任意一句，下面的语句就不好使了
                     $("#span3").html("span3");
                     $("#span3").html("span3_test");
            });
      </script>
      <style type="text/css">
            .one{
                     border:1px solid #03F;
                     float:left;
                     margin:1em;
                     padding:1.5em;
                     width:106px;
            }
            .two{
                     background-color:#FC0;
            }
            .three{
                     background-color:#FCF;
            }
      </style>
</head>
<body>
      <h3>这是标题中的文本</h3>
      <p><span id="span1"></span></p>
      <div id="div1">div元素：id属性为div1。<span></span></div>
      <div id="div2">div元素：id属性为div2。<span></span></div>
      <div id="div3">div元素：id属性为div3。<span id="span3"></span></div>
      <div id="div3">div元素：id属性为div3。<span></span></div>
</body>
</html>

/*以上是测试代码,问题如下图
*/

无标题.png (86.88 KB, 下载次数: 17)

作者: PDH 时间: 2017-5-19 15:36
为啥会出现图片中的问题呢？

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2