今天群里问了一个p的问题，初看我觉得恩这么简单我应该知道。

他代码如下：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

</head>

<body>

<body>

<div>

    <p><p></p></p>

</div>

</body>

</body>

</html>

<script>

$(function(){

     var p = $("p");

     alert(p.length);

});

</script>

　　然后输出了3

我怎么看也是2啊，然后我就让他把代码发给我看看，后来别人说p嵌套会有问题，我就试了一下其它标签  发现i，a ，div都是好的，

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

</head>

<body>

<div>

    <div>1<div>2</div>3</div>

</div>

</body>

</html>

<script>

    $(function() {

        var $targetName = $('div');

       console.log('i len:',$targetName.length);

        for(var i=0;i<$targetName.length;i++) {

            console.log($targetName.eq(i).html());

        }

    });

</script>

然后我突然想起，p里面是不能嵌套块级的，p自己也是块级，
例如<p>1<p>2</p>3</p>
他最后会被解析为
<p>1</p>
<p>2</p>
<p</p>

然后我继续想，如果我把p的style设置为inline呢？

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <style>

        p {

            display: inline;

        }

    </style>

</head>

<body>

<div>

    <p>1<p>2</p>3</p>

</div>

</body>

</html>

<script>

    $(function() {

        var $targetName = $('p');

       console.log('p len:',$targetName.length);

        for(var i=0;i<$targetName.length;i++) {

            console.log($targetName.eq(i).html());

        }

    });

</script>

恩  还是会输出3的， 这个应该是和浏览器有关系的。

ps：问题虽小，但是我今天才知道，略掉脸，囧。

关于p标签的嵌套问题的更多相关文章

  1. XHTML标签的嵌套规则分析

    在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div. ...

  2. HTML标签的嵌套

    随着时间的推移,我们学习html的基础知识有了大概的了解.而我发现,平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,然而发现有时的标签嵌套却是错误的.通过网上找 ...

  3. HTML标签的嵌套规则

    我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...

  4. XHTML标签的嵌套规则--很基础很重要

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  5. 为什么p标签不能嵌套div??

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. 火狐下<a>标签里嵌套的<select>不能选的bug

    今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...

  7. html标签的嵌套规则分析

    1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...

  8. HTML中部分标签的嵌套问题

    书写HTML结构的时候,对于标签的嵌套问题,在我发现这个问题之前,都不在自己的考虑之中,还傻傻的以为标签之间是可以进行百搭的! 其实,有些标签是不能进行随意嵌套,如果你没有深受其害,你是不会发现它的存 ...

  9. 超级简单却不知道：html标签的嵌套规则

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  10. PHPCMS V9标签循环嵌套调用数据的方法

    PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...

随机推荐

  1. avast从隔离区恢复后，仍无法打开被误杀文件的解决方案

    从隔离区中手动恢复后,隔离区中被恢复的文件将不再展示. 此时,如果手动恢复的文件仍无法打开(图标此时也异常),请: 将avast禁用: 将avast启用. 然后尝试重新打开被误隔离并手动恢复的文件.

  2. java集合框架——Map

    一.概述 1.Map是一种接口,在JAVA集合框架中是以一种非常重要的集合.2.Map一次添加一对元素,所以又称为“双列集合”(Collection一次添加一个元素,所以又称为“单列集合”)3.Map ...

  3. 【转】在程序中设置android:gravity 和 android:layout_Gravity属性

    在进行UI布局的时候,可能经常会用到 android:gravity  和 android:layout_Gravity 这两个属性. 关于这两个属性的区别,网上已经有很多人进行了说明,这边再简单说一 ...

  4. 的NodeJS异步数据库函数需要同步的答案 +

    我是新来的NodeJS和我写,需要从我去过的所有的函数应该是在这种情况下,读QUERY我的MySQL数据库,并返回代码,我非常希望服务器能够对其他事件作出回应而这个地方是轨迹查询请求.然而,它并不特别 ...

  5. Spring Security 之集群Session配置

    1.   新建Maven项目 cluster-session 2.   pom.xml <project xmlns="http://maven.apache.org/POM/4.0. ...

  6. IntelliJ IDEA / Eclipse 自动生成 Author 注释 签名

    Author 注释 签名如下: /*** @author 稚枭天卓 E-mail:zhxiaotianzhuo@163.com* @version 创建时间:2016-6-20 下午04:58:52* ...

  7. data-ng-hide指令用于隐藏或显示HTML元素

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承实体类(concrete class)?

    接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承实体类(concrete class)? 答:接口可以继承接口.抽象类可以实现(implements)接口,抽象类 ...

  9. C#继承简介与规则

    一.C#继承简介 1. 类的层次结构 下面是一个类的层次结构图: 上图反映了鱼类的派生关系,其中最高层的实体往往具有最一般最普遍的特征,越下层的实体就越具体,并且下层包含了上层的特征.如果将上层的实体 ...

  10. 面试-Spring理解

    转自http://hui.sohu.com/infonews/article/6331404387079946240 spring呢,是pivotal公司维护的一系列开源工具的总称,最为人所知的是sp ...