鱼C论坛

 找回密码
 立即注册
查看: 2723|回复: 3

[已解决]html:first-of-child浏览器是怎么解读的?

[复制链接]
发表于 2020-3-28 13:00:18 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
运行以下代码发现网页全红是怎么回事?
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html:first-child {
            background-color: red;
        }
    </style>
</head>

<body>
    <p>一</p>
    <p>二</p>
    <div>三</div>
    <p>四</p>
</body>

</html>
最佳答案
2020-3-28 15:46:24
html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-28 15:46:24 | 显示全部楼层    本楼为最佳答案   
html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-4-22 19:56:45 | 显示全部楼层
542624047 发表于 2020-3-28 15:46
html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.

第一个子元素为什么不是head呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-3 18:47:35 | 显示全部楼层
皙冉 发表于 2020-4-22 19:56
第一个子元素为什么不是head呢

不好意思,可能我之前说的不太清晰。
具体可以看这个属性详情 https://www.w3school.com.cn/cssref/selector_first-child.asp
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

给你举个例子,有div的id="test",其中有两个p元素 我css样式写 #test p:first-child  这个选择器选择的就是其父元素(指id为test的div)的首个p元素,由于html标签在dom结构中是根节点,他其实是没有父元素的,但你可以理解为父元素是整个文档 而文档的第一个元素就是html元素。head确实是html的第一个子元素,但是first-child的用法和你想象的还是不一样的,具体是怎么样可以好好在我说的那个网页去体会一下。还有就是head元素是不在页面内容中显示的,你可以在head中指定网页的标题title和标签中显示的图标icon。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 19:09

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表