今天群里问了一个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. js报变量 is not a function

    是变量名和函数名相同导致的 比如: function a(){} var a = a();

  2. Vue.js-创建Vue项目(Vue项目初始化)并不是用Webstrom创建,只是用Webstrom打开

    我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...

  3. 在写EF 时把时间格式化的做法

    SELECT COUNT(l.LogSeq), date_format(l.CreateDate,'%Y-%m') CreateDateByMonth FROM LOL l WHERE l.Creat ...

  4. POJ-3020 Antenna Placement---二分图匹配&最小路径覆盖&建图

    题目链接: https://vjudge.net/problem/POJ-3020 题目大意: 一个n*m的方阵 一个雷达可覆盖两个*,一个*可与四周的一个*被覆盖,一个*可被多个雷达覆盖问至少需要多 ...

  5. bzoj3882 [Wc2015]K小割

    Description Input Output Sample Input 3 3 1 3 100 1 2 3 2 3 4 1 3 5 Sample Output 8 9 12 -1   正解:暴搜+ ...

  6. 【CCPC-Wannafly Winter Camp Day3 (Div1) I】石头剪刀布(按秩合并并查集)

    点此看题面 大致题意: 有\(n\)个人,第\(i\)个人坐在编号为\(i\)的座位上,每个人等概率有石头.剪刀.布中的一张卡片.有两种操作:第一种是第\(y\)个人挑战第\(x\)个人,如果胜利则\ ...

  7. python 删除空白

    Python能够找出字符串开头和末尾多余的空白.要确保字符串末尾没有空白,可使用方法rstrip() . >>> favorite_language = 'python ' > ...

  8. delete分析 引用于 http://www.cnblogs.com/yuzhongwusan/archive/2012/06/14/2549879.html

    最近重新温习JS,对delete操作符一直处于一知半解的状态,偶然发现一篇文章,对此作了非常细致深入的解释,看完有茅塞顿开的感觉,不敢独享,大致翻译如下. 原文地址:http://perfection ...

  9. Mybatis异常:java.lang.NumberFormatException: For input string: "S"

    MyBatis异常日志如下: Caused by: java.lang.NumberFormatException: For input string: "S" at sun.mi ...

  10. 记录表TABLE的使用详解

    定义记录表(或索引表)数据类型与记录类型相似,但它是对记录类型的扩展.它可以处理多行记录,类似于高级中的二维数组,使得可以在PL/SQL中模仿数据库中的表. 定义记录表类型的语法如下: 1 2 TYP ...