P标签为什么不能嵌套块级标签

最新推荐文章于 2022-03-04 18:59:30 发布

Call_me_small_pure

最新推荐文章于 2022-03-04 18:59:30 发布

阅读量2.2k

点赞数 2

分类专栏： HTML css 文章标签：标签 p标签嵌套块级标签

路漫漫其修远兮，吾将上下而求索～

本文链接：https://blog.csdn.net/Call_me_small_pure/article/details/78020681

版权

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

今天我在学习的过程中发现用伪类first-child无法对p标签里的内容进行设置样式，通过查询网上资源，我在这里具体说一下我的理解，如有不对的地方，还望及时提醒
首先，解释一下first-child的含义
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

<head>
    <title></title>
    <style type="text/css">
        h3:first-child{
            font-size: 50px;
            background-color: #ffbc00;
        }
    </style>
</head>
<body>
<h3>伪元素的概念</h3>


<h1>第一种方法：使用伪元素</h1>


<div>this is a test
    <h3>我也是H3-1</h3>
    <h3>我是H3-2</h3>
</div>


<h3>我也是H3-2</h3>
</body>

结果很明显，只有

伪元素的概念

我也是H3-1

应用了first-child的样式，但如果把div标签改为 p 标签，则只有

伪元素的概念

本身具有这种样式，那么，p标签和div同为块级标签，为什么就不能实现这种样式呢

通过上网的查询，发现原来p元素内是无法包裹块级元素。
因为我们使用的DTD（DTD是文档类型定义，它的作用是定义 XML 文档的合法构建模块）中规定了块级元素是不能放在 p 标签里面的，再加上一些浏览器纵容这样的写法：
P 这是一个段落的开始
P 这是另一个段落的开始

很多浏览器把 body 视为一级，一部分块级元素视为二级，而有一部分不能自由嵌套的块级元素则被视为三级，它们包括有：标题标记的 h1- h6、 caption ；段落标记的 p ；分隔线 hr 和一个特别的元素 dt (它只存在于列表元素 dl 中)。
三级元素就是指，只能嵌套内联元素的块级元素。 p 也恰好是其中之一。其实在内联元素中，还是可以再区分一下的，有几个元素（img、input 等）比较特别，它们可以定义宽高，虽然这些元素属于inline，但是却具有一定的block（可以设置宽高），我们也可以赋予任何元素css属性display:inline-block。
还是不懂的可以多举几个例子理解一下

Call_me_small_pure

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
P标签为什么不能嵌套块级标签

今天我在学习的过程中发现用伪类first-child无法对p标签里的内容进行设置样式，通过查询网上资源，我在这里具体说一下我的理解，如有不对的地方，还望及时提醒首先，解释一下first-child的含义 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。<head> <title></title> <style type="text/css">
复制链接

扫一扫